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来与按下按钮向下滚动到每个部分的顶部

回答

相关问题