讓後退按鈕滾動頁面到頁面頂部

我想我遇到了Bootstrap的一個經典的後退按鈕問題，我真的試過在網上找東西找到解決方案，但不能。我正在使用自舉導航藥丸。我有大約8個藥丸，當我點擊其中任何一個時，頁面會滾動到該特定部分，並且URL更改爲xyz.com/abc#sectionx 當我按下後退按鈕時，URL更改爲xyz.com/abc但該頁面不會回滾到頂部。讓後退按鈕滾動頁面到頁面頂部

--- **** -----

編輯：我不認爲我做了這一點。 URL的變化，但頁面仍然在同一節xyz.com/abc#sectionx 因此，如果用戶不看網址，那麼他們會認爲按下後退按鈕沒有效果。

--- **** -----

所以我試圖用這樣的：

$('html,body').on('hashchange', function() { 
    $('body').scrollTop(0); 
});

但沒有工作，所以我想在一個不同的定義頂部的值方法：

$('html,body').on('hashchange', function() { 
    var top = $(window.location.hash).offset().top; 
    $('body').scrollTop('top'); 
});

但沒有工作，所以我嘗試：

$('html,body').on('hashchange', function() { 
if (window.scrollY>0) { 
window.scrollTo(0,window.scrollY-20) 
setTimeout("gototop()",10) 
} 
});

我也嘗試用window代替html, body，但這也不起作用。我真的很困惑該怎麼做，以及如何使後退按鈕帶我到頁面的頂部。問題是後退按鈕正在改變很棒的URL，但它也需要滾動到頂部。任何有關如何實現這一目標的指導將非常有價值。我會非常感謝在jQuery或純JavaScript中的指導。

來源

2017-07-24 Deeksha Juneja

我是唯一一個在網站與後退按鈕混淆時真的很惱火的人嗎？ :( – DavidG

借調：我不會推薦這樣做，因爲大量的人依靠後退按鈕來做到這一點 – jhpratt

我個人認爲這樣做是非常不直觀的，如果按下後退按鈕，不希望頁面保留在網站的同一部分，而是希望它到達以前所在的位置，在本例中位於頁面的頂部。 –

如果您正在尋找滾動到頂部的方法。考慮浮動按鈕或分隔每個部分的鏈接。如上所述，通常用戶希望後退按鈕能夠完成預期的任務。

您可以使用自己的錨點輕鬆地創建鏈接，就像這樣。

<h2 id="top">Top of Page</h2> 

// block of content 

<a href="#top">Go to top</a> 

// block of content 

<a href="#top">Go to top</a> 

.....

來源

2017-07-24 23:19:59 lloyd

您認爲用戶期望後退按鈕可以做什麼？因爲目前在我的情況下，後退按鈕不會做任何事情的幾個點擊，因爲錨鏈接更改URL。所以按下後退按鈕只會改變URL，但不會將您重定向到任何頁面。我想知道這是否會讓用戶惱火。 –

一般來說默認行爲。我知道錨鏈接可能會有點奇怪，因爲它們只是讓你在附近移動。如果你想深入研究它，我建議你檢查[UX Stack Exchange]（https://ux.stackexchange.com/），因爲我不是UX的專家。 [這是一個關於後退按鈕的漂亮的帖子]（https://ux.stackexchange.com/questions/7909/do-users-understand-the-browser-back-button） – lloyd

讓後退按鈕滾動頁面到頁面頂部

回答

相關問題