jQuery滾動到Div

我正在製作一個FAQ頁面，並在頂部有按鈕跳轉到一個類別（它跳轉到我用作類別標籤的p標籤，例如我的一般類別爲<p id="general">）。而不是隻是跳到類別，我想添加滾動效果。我想要http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm之類的東西滾動到我的頁面的所需部分。該鏈接是一個腳本，可以很好地滾動到頁面的頂部。我需要類似的東西來滾動到我鏈接的地方。例如，如果我想去混雜。類別，我想只能擁有<a href="#misc">Miscellaneous</a>並讓它滾動到該頁面的該部分。jQuery滾動到Div

來源

2011-03-12 Christopher

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

檢查此鏈接：http://css-tricks.com/snippets/jquery/smooth-scrolling/的演示，我以前用過它，它工作得很好。

來源

2011-03-12 19:21:08 FarligOpptreden

呀，如果不是在15個字符的最小評論我會一直在與你的評論說：快！：P – FarligOpptreden 2011-03-12 19:23:23

這個劇本是勝利者，但我不知道誰可以選擇！ – Christopher 2011-03-12 19:28:08

那麼，看到我第一次（15秒），我想我應該獲得勝利？：P作爲謝意的表示，我將upvote symmet的答案一些額外的代表... – FarligOpptreden 2011-03-12 19:35:14

如果鏈接元素是：

<a id="misc" href="#misc">Miscellaneous</a>

和雜項類是由類似約束：

<p id="miscCategory" name="misc">....</p>

你可以使用jQuery做預期的效果：

<script type="text/javascript"> 
    $("#misc").click(function() { 
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top}); 
    }); 
</script>

據我記得正確..（雖然，我沒有測試它，並從內存中寫道）

來源

2011-03-12 19:22:59 Stoic

– moffepoffe 2012-11-17 21:25:04

像這樣的事情會讓你花費在每個內部鏈接的點擊和滾動到相應的書籤的位置：

$(function(){ 
    $('a[href^=#]').click(function(e){ 
    var name = $(this).attr('href').substr(1); 
    var pos = $('a[name='+name+']').offset(); 
    $('body').animate({ scrollTop: pos.top }); 
    e.preventDefault(); 
    }); 
});

來源

2011-03-12 19:28:08 Guffa

人們可以給出的最佳答案！謝謝 – Zippie 2013-10-04 22:08:19

請原諒我的愚蠢，但是有人能把這個答案翻譯成英文嗎？ – CodyBugstein 2014-02-06 23:06:21

@Imray：你不明白的是什麼？ – Guffa 2014-02-06 23:44:30

可以只使用JQuery的位置功能，讓您的DIV的座標，然後使用JavaScript的滾動：

var position = $("div").position(); 
scroll(0,position.top);

來源

2011-11-15 21:23:39 JimmyJammed

$（「div」）。offset（）效果更好。 – 2012-08-08 04:27:14

這是往往移動兩個人體所需和HTML對象在一起。

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

ShiftyThomas是正確的：

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.

所以要增加保證金使用：

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element.

來源

2012-02-19 09:36:31 Brian

+18

這裏沒有分號'.offset（）。top;' – luqmaan 2012-09-20 15:50:20

就像魅力....！ – user1811801 2013-10-28 12:30:30

頂部的10像素邊距不應該減10嗎？ .offset（）。top - 10 – ShiftyThomas 2014-05-28 20:32:26

我遇到同樣的。鋸使用這樣一個例子：我用它如下 https://github.com/flesler/jquery.scrollTo

：

$('#arrow_back').click(function() { 
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
});

乾淨的解決方案。適合我！

來源

2015-01-10 12:28:31 Paul0515

下面的腳本是一個通用的解決方案，適合我。它基於從這個和其他線程中提取的想法。

當單擊以「＃」開頭的href屬性的鏈接時，它會平滑地將頁面滾動到指定的div。只有「＃」存在的地方，它會順利滾動到頁面頂部。

$('a[href^=#]').click(function(){ 
    event.preventDefault(); 
    var target = $(this).attr('href'); 
    if (target == '#') 
     $('html, body').animate({scrollTop : 0}, 600); 
    else 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top - 100 
    }, 600); 
});

例如，當上面的代碼存在時，點擊一個鏈接與標籤<a href="#">滾動到的頁面的頂部以速度600以速度600點擊一個鏈接與標籤<a href="#mydiv">滾動到100像素以上<div id="mydiv"> 。隨意更改這些數字。

我希望它有幫助！

來源

2015-02-24 18:06:28 lflier

我應該刪除第2行：'event.preventDefault（）;'。通過這個規則，錨點不會被添加到URL中（在你的地址欄中）。所以，如果有人複製頁面....你明白了嗎？ ;）通過刪除該行已修復。謝謝:) – Bob 2015-03-07 21:11:51

是的，那好點。謝謝。該行也阻止了腳本在Firefox中的工作。 – lflier 2015-07-30 23:32:00

您還可以使用，而不是「HREF」「名」更清潔網址：

$('a[name^=#]').click(function(){ 
    var target = $(this).attr('name'); 
    if (target == '#') 
     $('html, body').animate({scrollTop : 0}, 600); 
    else 
     $('html, body').animate({ 
     scrollTop: $(target).offset().top - 100 
    }, 600); 
});

來源

2016-01-19 09:18:12 nickRO87

jQuery滾動到Div

回答

相關問題