平滑滾動到頁面加載的所需部分

我創建了一個具有自定義分頁功能的WordPress網站。該函數將添加的#latest添加到鏈接末尾，以便將最新帖子放入到我的網站div中。例如，如果用戶單擊第3頁，它將加載該頁面，然後將它們發送到div #latest。這工作正常，但我希望它順利滾動到div。平滑滾動到頁面加載的所需部分

我試着添加這個jQuery並沒有發生任何事情，它仍然只是突然去的部分。

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

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

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

是否有這樣做的更好的辦法？

來源

2015-10-26 pocockn

我相信有一些資源在滾動動畫生效時沒有被考慮到，並且由於該函數以頂部偏移量工作 - 您必須確保在所有可能的資源之後使用它影響文檔的高度或元素的偏移量，正在加載。

將您的ready更改爲load。

.ready() vs. .load()

在大多數情況下，該腳本可以儘快的DOM層次結構已經完全構造運行。傳遞給.ready（）的處理程序保證在DOM準備就緒後執行，所以這通常是最好的位置來附加所有其他事件處理程序並運行其他jQuery代碼。

在代碼依賴於加載資源的情況下（例如，如果需要尺寸的圖片），代碼應該放置在加載事件的處理程序中。

這裏是我的功能：

$(function(){ 
    var target = "latest"; 
    $('html, body').animate({ 
     scrollTop: $('#'+target).offset().top 
    }, 900,'swing'); 
    return false; 
});

JSFiddle

來源

2015-10-26 14:00:54

這裏是它的工作http://jsfiddle.net/9SDLw/1432/ –

完美的作品的一個版本。謝謝！ – pocockn

有沒有辦法讓這種情況發生，只有當我的分頁鏈接之一被點擊和頁面刷新？現在，當用戶第一次點擊主鏈接到達頁面時，它就會滾動。 – pocockn

我相信被分配目標之前的動畫功能正在運行。我會用承諾來解決這個問題。

var target = $.deferred; 
target.resolve("latest"); 
$.when(target).done(function scrollTo(where){ 
    $('html, body').animate({ 
     scrollTop: $('#'+where).offset().top 
    }, 900,'swing'); 
    return false; 
});

來源

2015-10-26 14:19:29 Will

平滑滾動到頁面加載的所需部分

回答

相關問題