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

这篇文章主要为大家详细介绍了HTML中JS实现打开页面直接跳转到锚点位置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

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

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

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

  //10代表离顶端的距离

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

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

window.οnlοad=function(){

location.hash='show';

}

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

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

以上就是HTML中JS实现打开页面直接跳转到锚点位置的全部内容，希望对大家的学习和解决疑问有所帮助，也希望大家多多支持361模板网。

感谢打赏，我们会为大家提供更多优质资源！