页面内跳转到指定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上的介绍 |
CopyRight 2018-2019 实验室设备网 版权所有 |