锚点自动跟随滚动定位 js-Tab选项卡特效js锚点定位

发布：2020-12-10 来源：CSDN 作者：ImagineCode 浏览：149 次评论：0

核心提示：当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。

当点击页面的锚点时会跳转到指定id的元素，而实际表现的是滚动条滚动使指定id元素对齐滚动条所处元素的【顶端】。如果当页面上方出现fixed定位时，将会出现锚点定位不准确的情况。
所以我们给“内容*”加上padding-top:80px;margin-top:-80px;即解决我们的问题。

<!DOCTYPE html> <html> <head> <title></title> <style> .section_maodian {height:1500px;width: 100%;} .sideMaodian {width:100%;clear:both;height:32px;overflow:hidden;position:fixed;z-index:9;background:#F8F8F8;border-bottom:solid 1px #e2e2e2;} .sideMaodian ul {float:left;width:100%;} .sideMaodian li {width:25%;float:left;text-align:center;list-style:none;line-height:20px;padding-bottom:10px;margin-bottom:80px;} .sideMaodian li.active {border-bottom:2px solid #4680d1;} .sideMaodian li.active {color:#4680d1}; </style> </head> <body> <div class="section_maodian">商品</div> <div class="section_maodian">详情</div> <div class="section_maodian">联系</div> <div class="section_maodian">推荐</div> <script> const ScrollAnchorModule = function() { let scrollH = document.documentElement.scrollTop||document.body.scrollTop; //scroll更新 const updateNav = (secItems,navItems) => { if(getScrollTop()===0) navon(0,navItems); if(getScrollTop()+getWindowHeight()===getScrollHeight()) navon(secItems.length-1,navItems); else { secItems.forEach((item,index)=>{ if(getScrollTop()>=item.offsetTop){ navon(index,navItems); } }); } } //定位 const toScroll = (index,secItems) => { //计算位置 let scrollY = secItems[index].offsetTop; window.scrollTo(0,scrollY); } //当前锚点 const navon = (index,navItems) => { navItems.forEach((item)=>{ item.classList = ""; }); navItems[index].classList = "active"; } //防抖 const debounce = (fn,wait) => { let timeout = null; return function() { if(timeout!==null) clearTimeout(timeout); timeout = setTimeout(fn,wait); } } //节流 const throttle = (fn,delay) => { let prev = Date.now();//记录上一次触发回调的时间 return function() { let context = this;//保留调用时的this上下文 let args = arugments;//保留调用时传入的参数 let now = Date.now();//记录本次触发回调的时间 if(now-prev >=delay) {//判断上次触发回调的时间和本次触发回调的时间差十分小于时间间隔的阈值 fn.apply(context,args);//大于设定的阈值，则执行回调 prev = Date.now(); } } } //滚动条在Y轴上的滚动距离 const getScrollTop = () => { let scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; 　　if(document.body){ 　　　　bodyScrollTop = document.body.scrollTop; 　　} 　　if(document.documentElement){ 　　　　documentScrollTop = document.documentElement.scrollTop; 　　} 　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; 　　return scrollTop; } //文档的总高度 const getScrollHeight = () =>{ let scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0; 　　if(document.body){ 　　　　bodyScrollHeight = document.body.scrollHeight; 　　} 　　if(document.documentElement){ 　　　　documentScrollHeight = document.documentElement.scrollHeight; 　　} 　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight; 　　return scrollHeight; } //浏览器视口(窗口)的高度 const getWindowHeight = () =>{ let windowHeight = 0; 　　if(document.compatMode == "CSS1Compat"){ 　　　　windowHeight = document.documentElement.clientHeight; 　　}else{ 　　　　windowHeight = document.body.clientHeight; 　　} 　　return windowHeight; } return {//模块返回接口 init: (options) => { let html = `<ul class="sideMaodian">`+options.navMenu.map((item,index)=>{ return `<li class="nav_maodian ">${item}</li>`; }).join('')+`</ul>`; document.body.insertAdjacentHTML('afterbegin',html); let navItems = document.querySelectorAll(options.navClass); let secItems = document.querySelectorAll(options.secClass); let sideMaodian = document.querySelector('.sideMaodian'); if(scrollH===0) navon(0,navItems); //利用事件冒泡机制，在点击的li元素的祖先元素ul标签上注册click事件 sideMaodian.addEventListener('click',event=>{ let item = event.target; let lists = Array.from(sideMaodian.querySelectorAll('li')); let index = lists.indexOf(item); //li 索引 if(event.target.tagName.toLowerCase() === 'li'){ navon(index,navItems); toScroll(index,secItems); } },false); //注册scroll事件 window.addEventListener('scroll',event=>{ event.stopPropagation(); debounce(updateNav(secItems,navItems),1000); },false); } } }(); var options = { navClass:'.nav_maodian', secClass:'.section_maodian', navMenu:['商品','详情','联系','推荐'] } ScrollAnchorModule.init(options); </script> </body> </html> 提示:可以修改后运行.

文本链接：https://blog.csdn.net/imaginecode/article/details/88257410
文章来源：CSDN
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。

标签： 滚动定位自动跟随锚点

锚点自动跟随滚动定位 js-Tab选项卡特效js锚点定位

更多>最新发布

TA发布的教程

推荐文章

CSS多行文本高度溢出隐藏，显示省略号

自定义 border（dashed）虚线的间距

JS获取年月日及时间

css不规则矩形阴影模拟纸张折页角效果