页面内锚点定位及跳转方法总结(推荐)


Posted in Javascript onApril 24, 2019

接着上一篇,其实是一个功能,本来感觉挺简单的一个问题,没想到遇到两个坎儿,无语。。。

上一篇是关于scroll事件绑定的问题,这一篇的问题是:点击锚点跳转到相应DIV的问题。

最简单的方法是锚点用<a>标签,在href属性中写入DIV的id。如下:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      height: 800px;
      width: 400px;
      border: 2px solid black;
    }
    h2 {
      position: fixed;
      margin:50px 500px;
    }
  </style>
</head>
<body>
  <h2>
    <a href="#div1" rel="external nofollow" >to div1</a>
    <a href="#div2" rel="external nofollow" >to div2</a>
    <a href="#div3" rel="external nofollow" >to div3</a>
  </h2>
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
</body>
</html>

这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。 

第二种方式是在js事件中通过window.location.hash="divId"跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦。

第三种方法是用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript"><br>$(document).ready(function() {
  $("#div1Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#div2Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
  $("#div3Link").click(function() {
    $("html, body").animate({
      scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
    return false;
  });
});
1
</script>

注意:运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。

 

$("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。

另外,脚本可以进一步优化,自己来试试

这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。

缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。

第四种方法是用js的srollIntoView方法,直接用:

document.getElementById("divId").scrollIntoView();

这种方法的好处,是URL不会变,同时能够响应相应的scroll事件,不需要算法什么的。

推介大家用第四种,我依次试了前三种,都有各种问题(可能是页面较复杂的缘故吧,当然,技术不咋也是。。。)  

以上所述是小编给大家介绍的页面内锚点定位及跳转方法总结详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 替换功能函数,用正则表达式解决,js的全部替换
Dec 08 Javascript
jquery trim() 功能源代码
Feb 14 Javascript
JS加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
JS实现div居中示例
Apr 17 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
jQuery动态改变多行文本框高度的方法
Sep 07 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 #Javascript
详解微信小程序开发用户授权登陆
Apr 24 #Javascript
微信小程序实现的一键拨号功能示例
Apr 24 #Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 #Javascript
微信小程序实现的图片保存功能示例
Apr 24 #Javascript
You might like
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
JS中数据结构之栈
2019/01/01 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python制作简易注册登录系统
2016/12/15 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
详解pyinstaller selenium python3 chrome打包问题
2019/10/18 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
中考标语大全
2014/06/05 职场文书
庆七一活动总结
2014/08/27 职场文书
企业授权委托书范本
2014/09/22 职场文书
稽核岗位职责范本
2015/04/13 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
公安机关起诉意见书
2015/05/20 职场文书
小学大队委竞选口号
2015/12/25 职场文书
Python入门之基础语法详解
2021/05/11 Python