let jump = document.querySelector("#map");//定义起跳点div
let total = jump.offsetTop;
let distance =
document.documentElement.scrollTop || document.body.scrollTop;
// 平滑滚动,时长500ms,每10ms一跳,共50跳
let step = total / 80;
if (total > distance) {
smoothDown();
} else {
let newTotal = distance - total;
step = newTotal / 80;
smoothUp();
}
function smoothDown() {
if (distance < total) {
distance += step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothDown, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
function smoothUp() {
if (distance > total) {
distance -= step;
document.body.scrollTop = distance;
document.documentElement.scrollTop = distance;
setTimeout(smoothUp, 10);
} else {
document.body.scrollTop = total;
document.documentElement.scrollTop = total;
}
}
},
Proceed as follows:
# Bind the click event to the element
## Set the id name for which element to jump to
### Define the click event in methods: function(){ document.querySelector("#header").scrollIntoView(true);}