頁面跳轉到錨點後移動屏幕滾動位置？

我在單個網頁上有一個菜單，其鏈接將頁面移動到具有相應ID的部分。但是，有一個粘性標題覆蓋了每個部分的頂部，所以我想略微滾動以進行補償。頁面跳轉到錨點後移動屏幕滾動位置？

我試圖確定一種方法，在頁面移動到一個部分後，將頁面滾動50px 。我嘗試在每個鏈接上執行一個.click()事件偵聽器，但似乎在發出回調後移動頁面，否定了我嘗試滾動的操作。

我的代碼如下所示：

HTML：

<ul id="menu"> <li id="menu-item-1"><a href="#1">1</a></li> <li id="menu-item-2"><a href="#2">2</a></li> <li id="menu-item-3"><a href="#3">3</a></li> <li id="menu-item-4"><a href="#4">4</a></li> </ul>

JS：（兩個內線在控制檯工作，但不是在頁面代碼本身）

$('#menu-item-1 a').click(function(){ var y = $(window).scrollTop(); $(window).scrollTop(y-50); });

有沒有辦法監聽一個鏈接動作來完成，然後運行我的滾動代碼？

來源

2017-07-07 AKor

沒有嘗試設置超時，就會有閃爍效果，雖然（不顯着）

你也可以改變你的單擊事件處理裏項目內的全部標籤這樣

$('li > a').click(function(){ 
    setTimeout(function(){ 
     var y = $(window).scrollTop(); 
     $(window).scrollTop(y-50); }, 1); 
});

這裏是你https://jsfiddle.net/fxabnk4o/16/

來源

2017-07-07 19:23:17

我想這一點，但想看看是否有這樣做一個更清潔的方式。我有過設置超時的經驗，如果某個事件在不同的瀏覽器/計算機上以不同的速度發生，硬編碼的時間限制可能不起作用。 – AKor

設置計時器爲50毫秒應該工作......我很確定，如果這只是一個定位到頁面內的div標籤沒有任何其他功能，它會比這更快 –

樣本小提琴正如你觀察到：

但現在看來，回調發出後的頁面被移動，否定我試圖滾動

這是因爲你的事件連接到錨標記之前的錨標記默認行爲將被執行。您正在使用ID，因此您可以使用它來通過JavaScript進行滾動。這裏是我已經嘗試了一個例子： http://plnkr.co/edit/FzHYaxMCeOMTvWurtNRe?p=preview

<ul id="menu"> 
    <li id="menu-item-1"><a href="#1" onClick = "handleClick(event, 1)">1</a></li> 
    <li id="menu-item-2"><a href="#2" onClick = "handleClick(event, 2)">2</a></li> 
    <li id="menu-item-3"><a href="#3" onClick = "handleClick(event, 3)">3</a></li> 
    <li id="menu-item-4"><a href="#4" onClick = "handleClick(event, 4)">4</a></li> 
</ul> 

function handleClick(e, scrollElemId){ 
    e.preventDefault(); 
    window.scrollTo(0,document.getElementById(scrollElemId).offsetTop+50); 
}

來源

2017-07-07 20:19:19

頁面跳轉到錨點後移動屏幕滾動位置？

回答

相關問題