首页 > 开发 > JS > 正文

HTML中JS实现打开页面直接跳转到锚点位置

2024-09-06 12:41:16
字体:
来源:转载
供稿:网友
这篇文章主要为大家详细介绍了HTML中JS实现打开页面直接跳转到锚点位置,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

今天下午给用户在做一个简单的单页面网站的时候,用户要求实现这样的一个功能,打开网站页面或者域名,能自动跳转到其中一个在中间位置的锚点。

  这样的情况很少有朋友会遇到,但是也不能因为用得少就不去处理,下面是361模板网想的2种处理办法,我们最终选择的是第二种方法,大家可以一起来看下。

第一种方法、使用onLoad属性实现

<body onLoad="scrollTo(0,10)">  //10代表离顶端的距离

打开页面onload定位位置

这种方法简单,就是打开页面的时候滚动到距离顶部10px的位置停下来,是可以实现定位到锚点的,只需要计算好顶部到锚点的具体的距离就可以了,但是这样的方法有一个小问题,就是如果该页面是自适应移动端就会很麻烦,甚至可以说实现不了。我们再看看第二种方法。

第二种方法、使用JS打开页面跳转定位到锚点位置

<script>window.onload=function(){location.hash='show'; }</script>

上面JS里的show就是我们的锚点的ID。

HTML中JS实现打开页面直接跳转到锚点位置

这样在页面被打开的时候就会直接跳转定位到锚地名称id="show"位置了,大家可以尝试看下具体效果。

以上就是HTML中JS实现打开页面直接跳转到锚点位置的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持武林网。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表