页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView） |
您所在的位置：网站首页 › 怎么设置a标签的位置 › 页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView） |
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）
|
页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）
由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案 用a标签的href属性这是比较常用的一种方法 href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。 查资料的时候发现html5中a标签新增download属性，很强大但是兼容性还不够 link .link{ float: left; } .target{ float: left; } .target ul li{ height: 400px; } 1 2 3 JAMES PAUL HARDEN缺点：点击跳转后url发生变化，页面刷新后可能有问题 通过window.location.hash此方法原理与通过a标签的href属性相同，都是根据锚点来实现定位 hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。 css standard .link { float: left; } .target { float: left; } .target ul li { height: 400px; } JAMES PAUL HARDEN JAMES PAUL HARDEN window.onload = function () { // 兼容 function addListener(target, type, handler) { if (target.addEventListener) { target.addEventListener(type, handler); } else if (target.attachEvent) { target.attach("on" + type, function () { handler.call(target); //让handler中的this指向目标元素 }); } else { target["on" + type] = handler; } }; var dom = document.getElementById('link'); addListener(dom, 'click', function (e) { window.location.hash = e.target.className; }); }缺点：点击跳转后url发生变化，页面刷新后可能有问题 用scrollTop属性实现根据元素的scrollTop属性实现，这是之前很常用的一种实现方式，此处不细说。实例借助Jquery实现 css standard .link { float: left; } .target { float: left; } .target ul li { height: 400px; } JAMES PAUL HARDEN JAMES PAUL HARDEN $(document).ready(function () { $("#link").click(function () { $("html, body").animate({ scrollTop: $("#JAMES").offset().top }, { duration: 500, easing: "swing" }); return false; }); $("#link2").click(function () { $("html, body").animate({ scrollTop: $("#PAUL").offset().top }, { duration: 500, easing: "swing" }); return false; }); $("#link3").click(function () { $("html, body").animate({ scrollTop: $("#HARDEN").offset().top }, { duration: 500, easing: "swing" }); return false; }); });缺点：如果页面复杂的话，偏移值可能会发生变化需要算法实现，并且脱离Jquery实现代码量会比较大，但是好处就是兼容性好，可行性高 用scrollIntoView实现先看看用scrollIntoView实现的兼容性
兼容性还不错，关键是实现特别简单，不需要自己计算（偷懒神器） 这个方法用的时候直接调用就okdocument.getElementById("divId").scrollIntoView(); scrollIntoView demo1 * { margin: 0; padding: 0; } body { height: 500px; } .scroll { margin-top: 300px; height: 200px; background: lightcoral; } .btn { padding: 10px 15px; position: fixed; right: 0; top: 300PX; background: rebeccapurple; border-radius: 10px; cursor: pointer; } click const btn = document.querySelector('.btn'); const test = document.querySelector('.scroll'); btn.addEventListener('click', function() { test.scrollIntoView(); })当然，scrollIntoView还接受一个参数，更具体的细节可以参考MDN上的介绍 |
【本文地址】
今日新闻 |
推荐新闻 |