jQuery來與按下按鈕向下滾動到每個部分的頂部

這是我的代碼：Js Fiddle jQuery來與按下按鈕向下滾動到每個部分的頂部

正如你可以看到我對對方有100％的高度之上幾個部分。我想知道如何獲得它，所以當用戶點擊「瞭解更多」時，他們會滾動到下一部分，因此該部分的頂部位於頁面的頂部。

通常情況下這將是非常簡單的，因爲我可以這樣做：

$('body').animate({ 
scrollTop:$(document).height() 
});

但是，如果用戶已經滾動的部分的一半，這是不行的，然後點擊按鈕。如果我可以爲每個按鈕按下使用相同的功能，而不是有三個不同的功能，每個不同的部分都有一個功能，那也是一件好事。

我猜碼會是這樣的（僞）：scroll to top sectiona + 1

來源

2014-07-03 Jimmy

你期待它的行爲如此http://jsfiddle.net/niranjan_borawake/9uxGq/11/？ –

部分應該在點擊時移動到頁面的頂部，還是應該滾動到視圖端口的頂部？ –

爲什麼你需要jQuery？在你的url中使用錨點標籤名稱來指出特定的部分。 –

與jQuery和平滑滾動

$('a').click(function(){ 
     var nextSection = $(this).closest('section').next('section'); 
     $('html, body').animate({ 
      scrollTop: $(nextSection).offset().top 
     }, 2000); 
    });

來源

2014-07-03 10:24:13 Torsoe

這是一個很好的乾淨的答案，但我怎麼得到它在我的小提琴工作？http://jsfiddle.net/9uxGq/20/ – Jimmy

1.你在文檔中有未封閉的元素 2.你的ID不是唯一的 3 。在你的情況下，定義沒有錨點的類可以更容易地導航 http://jsfiddle.net/9uxGq/22/ – Torsoe

謝謝修復 – Jimmy

爲什麼你不通過ID對每個部分和HREF指的是ID喜歡

<section id="sectionOne"> 
    <a href="#sectionTwo">Move to section two</a> 
</section> 

<section id="sectionTwo"> 
    <a href="#sectionOne">Move to section one</a> 
</section>

來源

2014-07-03 10:08:45 Sami

這工作正常，但我希望有一個平穩的過渡 – Jimmy

使用此 $（「html，body」）。animate（{scrollTop：$（'＃sectionNo '）.offset（）。top}，1000）; http://stackoverflow.com/questions/6682451/animate-scroll-to-id-on-page-load – Sami

這將以1秒的速度滾動到特定部分的頂部。 1000是以毫秒爲單位的動畫速度。 – Sami

你也可以試試以下。

var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top); 

$(document).scrollTop(amount_to_scroll_by); // animate this scroll

希望這有助於:)

來源

2014-07-03 10:14:25

我欣賞，但我不知道如何實現該 – Jimmy

你的意思是動畫？ –

使用jQuery，您可以平滑滾動的目標。

這裏是一個SAMPLE

JS：

$("a").click(function(e) { 
    e.preventDefault(); 
    var target = $(this).attr('href'); 
    $('html, body').animate({ scrollTop : $(target).offset().top + "px"});  
});

來源

2014-07-03 10:23:47 qtgye

你應該先解決了你的錨和使用哈希代碼段，允許本地導航在錨點之間。

我已經創建了一個非常簡單的演示，以便您理解這一點（不使用標記來簡化它）。

演示：http://jsfiddle.net/abhitalks/9uxGq/15/

（與你的標記另一個演示：http://jsfiddle.net/abhitalks/9uxGq/19/）

你需要兩個錨，一個是點擊鏈接和其他標記目標的錨位置。

例如：

<div> 
    <a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment --> 
    <h2>Sub Heading 2</h2> 
    <p> 
     Some text content here 
    </p> 
    <a href="#LearnMore2">Learn More</a> <!-- Used to click to got to next anchor --> 
</div>

注：當然不是使用第二錨的標記，你可以用一個id使用div（或你的情況section）。但是，a更好，因爲它對於內容導航更具語義，並且它意味着定位點。

一旦完成，這將成爲你的後備。現在，您可以使用輕鬆實現動畫的jQuery等

這將是如此簡單：

// bind click on anchors (use selectors as per your requirements) 
$("a").on("click", function(e) { 
    e.preventDefault(); // prevent the default behaviour 
    var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor 
    var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker 
    $('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body 
});

或者：

// bind click on anchors (use selectors as per your requirements) 
$("a").on("click", function(e) { 
    e.preventDefault(); // prevent the default behaviour 
    var nextAnchor = $(this).attr('href'); // get the next marker anchor 
    var gotoPoint = $(nextAnchor).position().top; // get the position of marker 
    $('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body 
});

現在將其應用到您的使用案例，演示變爲： http://jsfiddle.net/abhitalks/9uxGq/19/

希望對您有所幫助s，你可以在你的標記和用例中解決它。。

來源

2014-07-03 10:27:51 Abhitalks

jQuery來與按下按鈕向下滾動到每個部分的頂部

回答

相關問題