欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

361模板网

当前位置:361模板网 > 技术文档 > 网站技巧 > HTML中JS实现打开页面直接跳转到锚点位置
这篇文章主要为大家详细介绍了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实现打开页面直接跳转到锚点位置的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

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

热词标签: 锚点位置 HTML

上一篇织梦模板使用小教程:移动端搜索跳转到移动端页面

下一篇织梦模板如何在任意页面调用所有顶级栏目文章

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在