注意·滚动条滚动到指定位置(锚点)的方式不同
时间:2023-04-02 23:58:58
HTML
最近在项目中遇到传统锚点问题。那么什么是锚点问题呢?锚点是网页制作中的一种超链接,也称为命名锚点。命名锚点是页面内的超链接,就像快速定位器一样,非常常用。并且可以通过菜单快速定位网站内容。上图是锚点的示意图,那么如何实现这个需求呢?下面我将提供一些可以在不同场景下使用的锚点方法。1、传统的一血开发流程中,我们的锚点都是通过a标签跳转到对应的ID来实现的。菜单1菜单2内容1
内容2 这是a标签提供给我们的锚点解决方案。2.双杀原生js获取修改scrollTop。这种情况下,我们一般用它来固定页面元素的锚点设置,或者设置返回顶部按钮。//使用element.scrollTop获取当前元素的滚动条高度//可以在控制台输出document.documentElement.scrollTop====>number//返回一个数字类型的内容,即高度滚动条的//也可以通过给scrollTop赋值来设置滚动条的高度//在控制台输出document.documentElement.scrollTop=0//你会发现已经滚动的滚动条并滚动到页面顶部。在js的世界里,浏览器兼容性一直是个让人头疼的问题。Safari使用window.pageYOffset,IE使用document.body.scrollTop和document.documentElement.scrollTop;所以考虑到浏览器兼容性问题,最后总结出一个完美兼容的代码。//获取滚动条高度兼容性varscrollTop=document.documentElement.scrollTop||是实验中的一个功能,但是在主流浏览器中都有,而且使用起来意外的简单。话不多说,直接上代码。//将一个元素跳转到浏览器视口的顶部element.scrollIntoView()语法://等同于element.scrollIntoView(true)element.scrollIntoView();//布尔型参数//true元素的顶部它会与所在滚动区域的可见区域顶部对齐;false元素的底部会和它所在的滚动区域的可见区域底部对齐element.scrollIntoView(alignToTop);//具有选项的对象://{//行为:“自动”(默认)|“即时”|"smooth"(缓动),//块:"start"|"结束",//}element.scrollIntoView(scrollIntoViewOptions);//Object类型参数4.quadrakill目前已经实现了基本的锚点功能。点击菜单会跳转到相应的内容,但看起来还是有些生硬。呼~一眨眼就结束了,那我们加个慢动作,提升一下用户体验。在你需要滚动的div的样式中加一句。滚动行为:平滑;//滚动条慢速滚动5.pentakill至此,一个完整的锚点慢速滚动就完成了,快去试试吧!!!