jquery滾動來抵消頁面加載的目標div

我想滾動到URL中的div。這可能是21個ID，如一個：jquery滾動來抵消頁面加載的目標div

url.com/test#lite1

url.com/test#lite2

url.com/test#lite3

我需要這發生在頁面加載（用戶來自電子書，應該看到他們點擊的確切項目）。

這裏是我目前擁有的代碼：

$(document).ready(function(){ 
    $('a[href^="#"]').load(function() { 
     e.preventDefault(); 

     var target = this.hash; 
     var $target = $(target); 

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

</script>

它不工作，我想這是因爲這部分（我不知道我在這裏做什麼）的：

$('a[href^="#"]').load(function() {

我也希望它在頁面的中心（不像瀏覽器在滾動到div時切斷頂部）。請讓我知道如果這是正確的：

$target.offset().top -150

非常感謝！

來源

2015-11-04 ramitaste

window.location.hash包含URL中的當前散列，所以使用它。由於散列已經在URL中（正如你所說，他們通過點擊帶有散列的鏈接來到頁面），所以你不需要手動添加它。嘗試使用這樣的：

$(document).ready(function(){ 
    $('html,body').animate({ 
      scrollTop: $(window.location.hash).offset().top-150 
     }, 900, 'swing'); 
});

使用WordPress，似乎$需要通過jQuery的更換，因此就出來：

jQuery(document).ready(function(){ 
    jQuery('html,body').animate({ 
      scrollTop: jQuery(window.location.hash).offset().top-150 
     }, 900, 'swing'); 
});

來源

2015-11-04 15:20:44 Zeus

http://www.tasteaholics.com/shopping-list-ingredients/#lite14 我嘗試它在這裏，但不工作：/我錯過了什麼或不加載的東西？我有jquery加載頁面： – ramitaste

@ramitaste在該頁我看到''scrollTop'，'逗號在scrollTop導致語法錯誤後，使用'：'而不是逗號。而且，如果你使用的是chrome，那麼請按ctrl + shift + i來獲取開發者工具，然後點擊控制檯選項卡，它會顯示你的語法錯誤和其他警告。 – Zeus

Ahh我切換回你的代碼（正在嘗試Quantastical的代碼）並用jQuery代替$並且它工作正常！非常感謝！！ – ramitaste

作爲替代方案，你可以嘗試使用下面的jQuery插件。我已經在多個項目中使用過它們。他們是定製的，並提供不錯的，流暢的動畫效果：

scrollTo（download，documentation）允許您滾動到頁面上的特定元素。基本用法：$(element).scrollTo(target);

localScroll（download，documentation）要求scrollTo作爲依賴，並處理錨你。您可以通過選擇它們的容器將其應用到特定的一組鏈接：$('#link-container').localScroll();，或者你可以在全球範圍激活：$.localScroll();

來源

2015-11-04 21:52:21 MarkPlewis

jquery滾動來抵消頁面加載的目標div

回答

相關問題