jQuery的滾動到錨返回NaN的位置哈希

我使用它實現了動畫滾動到錨下面的jQuery代碼：

(function($){ 
var jump=function(e) 
{ 
    if (e){ 
     e.preventDefault(); 
     var target = $(this).attr("href"); 
    }else{ 
     var target = location.hash; 
    } 
    $('html,body').animate(
     { 
      scrollTop: $(target).offset().top - 150 
     }, 1500, 'swing', function() 
     { 
      location.hash = target - 150; 
     }); 
}; 
$('html, body').hide(); 
$(document).ready(function() 
{ 
    $('a[href^=#]:not(#toggle)').on("click", jump); 
    if (location.hash){ 
     setTimeout(function(){ 
      $('html, body').scrollTop(0).show(); 
      jump() 
     }, 0); 
    }else{ 
     $('html, body').show() 
    } 
}); 
})(jQuery);

正如你從上面的代碼中看到的，我使用的爲150px目標偏移值：

scrollTop: $(target).offset().top - 150

爲了使這個代碼能夠正常工作，我也需要通過目標與偏移到的location.hash。我這樣做：

location.hash = target - 150;

在這樣的實現下，代碼工作正常。除了當我滾動到錨點時，它總是在URL中顯示#NaN。這顯然是因爲上面的路線。但是，如果我不使用-150像素，那麼它會滾動到帶有偏移量的目標，然後突然跳到沒有偏移量的原始錨點位置。

我的問題是，我怎樣才能實現雙贏？我的意思是，沒有#NaN在URL中，並正確的滾動來錨定頂部的偏移量。我聽說有可能使用「e.preventdefault」，但不知何故它不適用於我。

任何建議將不勝感激。

來源

2017-01-31 user2963789

那麼你有一個字符串並減去一個數字。哈希有一個＃符號.... – epascarello

那麼爲什麼不把錨點移動到偏移位置呢？ – epascarello

我知道我想從字符串中減去數字，這就是爲什麼我得到NAN。不幸的是，我不能將錨點移動到其他位置，因爲我的頁面由許多小部件組成，可以重新排序。在這種情況下，我會鬆散頁面的結構。 – user2963789

嘗試

$('html,body').animate(
    { 
     scrollTop: $(target).offset().top - 150 
    }, 1500, 'swing'); 
location.hash = target; 
};

我有同樣的問題，現在，它的工作原理

來源

2017-06-06 14:11:13 Fabio42

location.hash包括＃，所以你如果你嘗試做就可以了算術它不能被轉換爲數字。

改爲使用Number(location.hash.substr(1))。只要您嘗試將該號碼用作DOM ID，就需要添加該＃號。（你可能會考慮將你的代碼改爲不使用相同的變量來表示DOM節點和滾動位置，但這很容易混淆，如果我重構了這個，我會將這些ID改爲有意義的標籤，然後設置滾動位置基於那些元素的offset().top而不是散列本身的數字內容。）

來源

2017-06-06 14:30:55

jQuery的滾動到錨返回NaN的位置哈希

回答

相關問題