html自动跳转到锚点,HTML中JS实现打开页面直接跳转到锚点位置-程序员宅基地

技术标签: html自动跳转到锚点  

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

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

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

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

  //10代表离顶端的距离

a9017c16b987e29e345c0fcc95fbde18.png

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

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

window.οnlοad=function(){

location.hash='show';

}

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

5aaa6777511a2fc1d3c3ef3c13bfef24.png

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

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42298927/article/details/117738063

智能推荐

【转】Oracle DBMS_SPACE-程序员宅基地

文章浏览阅读149次。文章转自:互联网Oracle DBMS_SPACEVersion 11.1GeneralPurpose This package provides segment space information not currently available through the standard views...._select argument_name, data_type, in_out, default_value from user_arguments a

ansible-playbook之shell模块_ansible playbook shell-程序员宅基地

文章浏览阅读7.4k次。常用命令:cmd:用接要执行的命令chdir: 切换目录cat shell.yml---- hosts: zsk gather_facts: no become: yes remote_user: root一、切换到目录执行命令 tasks: - name: '解压' shell: chdir: /data cmd: 'tar zxvf apache-tomcat-8.5.70.tar.gz'二、执行多个命令,用管道_ansible playbook shell

机器学习:基于随机森林(RFC)对酒店预订分析预测_随机森林做一个酒店的评分-程序员宅基地

文章浏览阅读3.2k次,点赞81次,收藏93次。在机器学习中,随机森林是一个包含多个决策树的分类器, 并且其输出的类别是由个别树输出的类别的众数而定。 Leo Breiman和Adele Cutler发展出推论出随机森林的算法。 而 "Random Forests" 是他们的商标。 这个术语是1995年由贝尔实验室的Tin Kam Ho所提出的随机决策森林(random decision forests)而来的。这个方法则是结合 Breimans 的 "Bootstrap aggregating" 想法和 Ho 的"random subspace met_随机森林做一个酒店的评分

Python基础语法——变量_python中变量不看关键字是吗?-程序员宅基地

文章浏览阅读2.6k次,点赞5次,收藏8次。一.Python 语言特点1.简单易学:与C和Java比,Python的学习难度更低一点,更适合新手入门。2.简洁明了。Python的语法非常简洁,代码量少,非常容易编写。3.Python 是解释型语言:开发过程中没有了编译这个环节。类似于PHP和Perl语言。4.Python 是交互式语言:可以在一个 Python 提示符>>>后直接执行代码。5.Python 是面向对象语言:Python支持面向对象的风格或代码封装在对象的编程技术。二.Python基础_python中变量不看关键字是吗?

HTTP请求API(SpringBoot java项目),token验证报:JWT signature does not match locally computed signature-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏5次。通过SpringBoot搭建restful API服务,使用JWT进行登录验证,客户端每次登录会重新获取token,发现API服务端过滤器AuthFilter,通过HTTP 请求头获取token并验证token时,偶尔会报:JWT signature does not match locally computed signature, 因为每次重新登录(新token)后又正常了,所以项目运行了半年多,也没去管它。今日再查OOM问题时,发现日志很多这个JWT错误,遂萌生了要..._jwt signature does not match locally computed signature. jwt validity cannot

《中国建设行业电子签名应用白皮书》正式发布-程序员宅基地

文章浏览阅读733次,点赞17次,收藏19次。《中国建设行业电子签名应用白皮书》在上海发布,聚焦建设工程施工合同纠纷解决。电子签名技术提升合同签署效率,强化交易安全保障,降低潜在法律风险。专家呼吁广泛应用电子签名,助力建设行业数字化升级,提高整体运营效能。

随便推点

分布式缓存系统架构进化:Dragonfly扩展为全新形态的龙蜥技术_fly 缓存-程序员宅基地

文章浏览阅读105次。随着技术的不断进步,分布式系统在处理大规模数据和高并发访问方面起着至关重要的作用。为了应对这一挑战,Dragonfly缓存系统架构经过全新升级,引入了一项名为龙蜥技术的扩展,以进一步提升其性能和可扩展性。龙蜥技术是一种基于分布式系统的缓存系统架构,它通过在多个节点之间分配数据和负载,实现了高效的数据访问和分布式计算。下面将详细介绍龙蜥技术的设计原理,并提供相应的源代码示例。_fly 缓存

设计模式之组合模式(Composite)摘录_composite相关依赖-程序员宅基地

文章浏览阅读2.6k次。设计模式之组合模式(Composite)摘录!_composite相关依赖

扫雷游戏(图形界面)C语言小游戏_c语言图形化扫雷游戏-程序员宅基地

文章浏览阅读1.5k次,点赞6次,收藏40次。摆脱黑窗口,我们用easyX图形库做一个我们小时经常玩的扫雷小游戏。在做出来时你会发现,做一个小游戏原来如此简单,最会还有如何打包的教程,打包之后,可以发给朋友玩玩哦,在炫耀技术的同时可以回味一下童年乐趣。二、全局变量三、游戏初始化四、绘图渲染游戏五、自动解密0周围的格子(使用递归)六、鼠标消息七、判断成功/失败八、主函数 九、运行成功 下一步 给项目起名 点击创建因为我把图片素材放在tp文件夹下,所以需要添加一个子目录_c语言图形化扫雷游戏

CSS——水平(横向滚动条)_css 超出左右滚动-程序员宅基地

文章浏览阅读2.9w次,点赞4次,收藏6次。Document ul { width: 200px; height: 100px; overflow-x: scroll; overflow-y: hidden; white-space:nowrap; /* ul中的内容不换行 */ } ul li { display: inline-block; }_css 超出左右滚动

Python去掉文件中空行_删除文档中的大段空行python-程序员宅基地

文章浏览阅读7.2k次,点赞3次,收藏21次。# coding = utf-8def clearBlankLine(): file1 = open('text1.txt', 'r', encoding='utf-8') # 要去掉空行的文件 file2 = open('text2.txt', 'w', encoding='utf-8') # 生成没有空行的文件 try: for line in file1.readlines(): if line == '\n': _删除文档中的大段空行python

quartus ii中Warning (10236)、Warning (10238)的解决办法-程序员宅基地

文章浏览阅读5.2k次,点赞4次,收藏5次。quartus ii中Warning(10236)、Warning (10238)的解决办法Warning(10236):VerilogHDLImplicitNetwarningatforward_replace.v(16):createdimplicitnetfor"out_1"将out_1声明为wire型即可,这个问题出现在调用的两个..._warning (10236): verilog hdl implicit net warning at oled_drive.v(30): creat