在頁面加載時動畫滾動到ID

102

在頁面加載時嘗試將滾動設置爲特定ID。我已經做了很多的研究和跨此次前來：在頁面加載時動畫滾動到ID

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

但這似乎從ID開始和動畫頁面頂部？

的HTML（這是下跌的一頁一半）很簡單：

<h2 id="title1">Title here</h2>

來源

2011-07-13 Adi

這不是一個很好的答案，但我強烈推薦Ariel Flesler的「scrollTo」插件;它具有很多用於平移頁面的功能，以及針對常見情況的插件的一些擴展（例如，如果它在同一頁面上，您可能會發現他的「LocalScroll」插件可用於滾動到鏈接的href）。你可以在這裏得到插件：http://flesler.blogspot.com/2007/10/jqueryscrollto.html – Faisal

該OP是舊的，但我會分享這個帖子爲來自SE的其他人。這裏有一篇文章分享瞭解決這個問題的簡單函數：http://smartik.ws/2015/01/super-simple-animate-scroll-to-id-using-jquery/ –

276

你只是滾動你的元素的高度。 offset()返回元素相對於文檔的座標，並top PARAM會給你在沿y軸的像素元素的距離：

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

而且你還可以延遲添加到它：

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);

來源

2011-07-13 16:46:36 BumbleB2na

這是什麼使自動滾動，使我去「WOW COOL !!」？也許這是您的解決方案的簡單性。 – theblang

我需要在頁面加載時將元素滾動到視圖中，但有兩個問題：a）使用「html，body」給出了兩個回調（每個匹配元素一個）。 b）它取決於瀏覽器身體或html的哪一個工作。所以我提出了一個你可以在項目中使用的要點，以確保在任何瀏覽器中滾動視圖都可以工作，並且在動畫結束時你只能得到一個回調。 https：//gist.github。com/netsi1964/4ddffe1ae14e05220d25 – Netsi1964

這是不正確的。你真的應該考慮我們試圖「滾動」的body或元素的當前滾動位置。考慮到這一點，你可以將'body'的當前滾動位置添加到我們想要查看的元素的'offset（）。top'位置，得到的總和就是我們要滾動的值。'$（' （{scrollTop：（$（'html，body'）。scrollTop（）+ $（'＃title1'）。offset（）。top）}，1000）;' – magreenberg

有一個jQuery的插件。它將文檔滾動到特定的元素，以便它完全位於視口中間。它還支持動畫緩衝，使滾動效果看起來非常平滑。檢查this link。

在你的情況下，代碼是

$("#title1").animatedScroll({easing: "easeOutExpo"});

來源

2013-08-12 21:45:03

「它還支持動畫緩衝，以便滾動效果看起來非常平滑」不幸的是，這並不正確。如果電腦由於某種原因而速度很慢，它會一直跳躍而沒有正確移動。 – brunoais

平滑滾動需要計算很多像素。確定一個緩慢的「電腦」（更多的GPU）不能這樣做，但由於缺乏足夠的ALU。所以一般他是對的。和真正簡單的滾動庫。 – Roland

$(jQuery.browser.webkit ? "body": "html").animate({ scrollTop: $('#title1').offset().top }, 1000);

jquery-animate-body-for-all-browsers。

來源

2015-02-11 07:16:13

請嘗試以下代碼。使與類名的元素頁滾動，並保持ID名稱href相應鏈接

$('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: ($($anchor.attr('href')).offset().top - 50) 
     }, 1250, 'easeInOutExpo'); 
     event.preventDefault(); 
    });

來源

2015-08-13 05:21:12 Akhil

與scrollIntoView()功能純JavaScript解決方案：

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});

<h2 id="title1">Some title</h2>

附： '平滑'參數現在可以在Chrome 61中使用，作爲julien_c在評論中提到。

來源

2016-06-04 09:47:11

現在可以使用（來自Chrome 61） –

在頁面加載時動畫滾動到ID

回答

相關問題