百度网站建设中心,电子商务网站,工商所什么网站可做年报,定制软件开发流程图使用scrollIntoView进行锚点定位效果 不知道你有没有遇到这样的需求#xff1a;锚点定位#xff1f;进入页面某个元素需要出现在可视区#xff1f;…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴#xff0c;实现的方式有各种各样的#xff…使用scrollIntoView进行锚点定位效果 不知道你有没有遇到这样的需求锚点定位进入页面某个元素需要出现在可视区…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴实现的方式有各种各样的比如使用 scrollTop、监听滚动等等这也是很多小伙伴第一个想到的。 今天我们介绍一种更简单的方式scrollIntoView。 项目中经常会出现点击跳转锚点的方法比如给一个a标签一个href“#锚点”然后要跳的锚点给个id“锚点”这样就实现简单的跳转但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点然后你点击给一次后退都是退回上一个选择的锚点url这里我总结4个跳转锚点的方法。 a标签进行定位
也是最简单的方法是锚点用标签在href属性中写入div的id
style div { height: 800px; width: 400px; border: 2px solid black; } h2 { position: fixed; margin:50px 500px; }
/style h2 a href#div1to div1/a a href#div2to div2/a a href#div3to div3/a
/h2 div iddiv1div1/div div iddiv2div2/div div iddiv3div3/div 这种方法的缺点是点击锚点之后浏览器的URL会发生变化如果刷新可能会出现问题。 js事件
window.location.hashdivId跳转但地址也会发生变化感觉跟第一种方法没区别甚至更麻烦 利用animate属性
是用animate属性当点击锚点后页面滚动到相应的DIV。
$(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;});
});
代码我没验证这段来自-》》》》》
作者Flutter错误集
链接https://juejin.cn/post/6908965295109603335
来源稀土掘金
著作权归作者所有。商业转载请联系作者获得授权非商业转载请注明出处。srollIntoView方法
scrollIntoView 是 HTMLElement 集合下的一个 API每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样滚动到可视区。 为了更加官方一点我们还是先来看看官方的解释。官方解释Element 接口的 scrollIntoView()方法会滚动元素的父容器使被调用 scrollIntoView()的元素对用户可见。官方的解释还是比较好理解的我们摘要几个关键词出来 • Element 接口 • 滚动 • 可见 从上我们大致也能理解无非就是让某一个元素对用户可见但是为了更准确又通俗一点我们用自己的话简单概述一遍。 scrollIntoView()是 HTML 元素的一个方法假如我们有一个元素容器出现了滚动条有滚动条必然就有一些元素是不可见的为了让隐藏的元素可见我们可以手动滚动滚动条让元素出现另一种方法就是调用隐藏元素的 scrollIntoView 方法让它自动滚动到可视区内。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数参数解释
• alignToTop它是一个 Boolean 值它用来规定元素出现在可视区后与可视区的对齐方式为 true 代表顶端对齐false 代表低端对齐。
• scrollIntoViewOptions它是一个对象该参数主要是配置元素的动画效果以及位置的它有以下 3 个属性
• behavior它定义元素出现在可视区内过程的动画有 auto 和 smooth 两种选择。
• block定义元素的垂直方向的对齐方式有start, center, end, 或 nearest 4 个选项默认 start。
• inline定义元素水平对齐方式有start, center, end, 或 nearest4 个选项默认nearest。
在这里插入代码片注意
有些小伙伴可能发现两个参数都能定义元素的对齐方式它们之间有什么联系呢当 alignToTop 为 true 时scrollIntoViewOptions: {block: start, inline: nearest}这是它的默认值当 alignToTop 为 false 时scrollIntoViewOptions: {block: end, inline: nearest}这是它的默认值。htmlheadtitleHTML5_ScrollInToView方法/titlemeta charsetutf-8style typetext/css#myDiv{/* height:900px; */height: 50px;background-color:gray;overflow-y: scroll;}#roll_top{height:50px;background-color:green;color:#FFF;font-size:20px;position:relative;}#bottom{/* position:absolute; */display:block;left:0;bottom:0;}/style/headbodybutton idroll1scrollIntoView(false)/buttonbutton idroll2scrollIntoView(true)/buttondiv idmyDivdiv idroll_topscrollIntoView(ture)元素上边框与视窗顶部齐平/div div idbottomscrollIntoView(false)元素下边框与视窗底部齐平/div/div/bodyscriptwindow.onload function(){document.querySelector(#roll1).onclick function(){document.querySelector(#roll_top).scrollIntoView(false);}document.querySelector(#roll2).onclick function(){document.querySelector(#bottom).scrollIntoView(true);}
}/script
/html如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题浏览器实现了一下方法 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中HTML5选择了scrollIntoView() 作为标准方法。 scrollIntoView()可以在所有的HTML元素上调用通过滚动浏览器窗口或某个容器元素 调用元素就可以出现在视窗中。如果给该方法传入true作为参数或者不传入任何参数那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数调用元素 会尽可能全部出现在视口中可能的话调用元素的底部会与视口的顶部齐平。不过顶部 不一定齐平例如 //让元素可见 document.forms[0].scrollIntoView(); 当页面发生变化时一般会用这个方法来吸引用户注意力。实际上为某个元素设置焦点也 会导致浏览器滚动显示获得焦点的元素。 支持该方法的浏览器有 IE、Firefox、Safari和Opera。
