檢測頁面跳轉到特定元素ID

Question

用戶執行某種操作后，頁面將重新加載，並在URL中添加#someId ，因此該URL將類似於localhost/panel/mypage.php#someId ，作為默認操作，瀏覽器將跳至帶有以下內容的元素someId的ID。

我想做的是使用jQuery捕獲該錯誤，然后直接跳到#someId元素上方，而不是直接跳轉到#someId元素，並具有添加平滑滾動的功能。

那可能嗎？

Answer 1

正是“窗口”文檔對象的hashchange事件，這正是捕獲此行為所需的條件。 您可以使用：

1. JavaScript解決方案：

    window.addEventListener('hashchange', function(){ // smooth scroll code }); 

2. jQuery解決方案（v1.8 +）：

    jQuery(window).on('hashchange', function(){ // smooth scroll code }); 

注意： hashchange事件是在同一頁面上的URL哈希更改（location.hash）上觸發的，而不是在不同頁面上觸發的，例如從www.example.com/about.html#first轉到www.example.com/contact.html #second不會觸發hashchange事件。

Answer 2

這應該使您開始：

var a_hash = window.location.hash;
var offset = $(a_hash).offset();
if(offset.top > 100){
    offset.top = offset.top - 100;
}
var body = $("html, body");
body.animate({scrollTop: offset.top}, '500', 'swing', function() { 

});