原聲JS實現平滑到制定位置(仿錨點效果)
阿新 • • 發佈:2018-12-17
點選按鈕,頁面滑動到指定位置,仿a標籤錨點效果
function goTarget(target) { var timer = null; var lastPos = 0; function goMove() { var currentPosition = document.documentElement.scrollTop || document.body.scrollTop; currentPosition = parseInt(currentPosition) if(lastPos == currentPosition) { //頁面高度不夠長,未滑動到指定位置的時候,已經滑動到底部了 window.scrollTo(0, target); clearInterval(timer); console.log('move to ' + target); return; } lastPos = currentPosition; console.log(target, currentPosition); if(Math.abs(currentPosition - target) < 20) { window.scrollTo(0, target); clearInterval(timer); console.log('move end'); return; } if (currentPosition -target > 20) { currentPosition -= 20; window.scrollTo(0, currentPosition); } else { currentPosition += 20; window.scrollTo(0, currentPosition); } } timer = setInterval(goMove, 10); } $('#s-list1').on('click', function () { var targetPos = parseInt($('#s-manCpOne').offset().top); goTarget(targetPos); }) 轉載 原文:https://blog.csdn.net/u012193330/article/details/82910811