標簽,作為觸發(fā)點,然后使用JavaScript實現滾動效果。
下面是一個很簡單的向下滾動的代碼示例:function scrollToElement(targetElement) {
var topOffset = 0;
if(targetElement) {
if(targetElement.offsetParent) {
do {
topOffset += targetElement.offsetTop;
} while(targetElement = targetElement.offsetParent);
}
}
window.scrollTo(0, Math.max(topOffset - 70, 0));
}
document.querySelector('nav a[href^="#"]').addEventListener("click", function(e) {
e.preventDefault();
var targetElement = document.querySelector(this.hash);
scrollToElement(targetElement);
});
代碼解釋:
首先是函數定義,這個函數的作用是計算目標元素到頁面頂部的距離,并通過window.scrollTo方法,實現滾動效果。其中70是控制下滾后停留在頁面的高度。
在最后一段,我們使用addEventListener方法將點擊事件綁定在導航欄中的