Jquery通过按下按钮向下滚动到每个部分的顶部

Posted 2023-05-08

【中文标题】Jquery通过按下按钮向下滚动到每个部分的顶部

【英文标题】：Jquery to scroll down to top of each section with button press

【发布时间】：2014-08-24 09:23:02

【问题描述】：

这是我的代码：Js Fiddle

如您所见，我有几个部分相互重叠，高度为 100%。我想知道如何获取它，这样当用户点击“了解更多”时，他们会滚动到下一部分，因此该部分的顶部位于页面顶部。

通常我可以这样做很简单：

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

但是，如果用户已经将部分滚动到一半，然后点击按钮，这将不起作用。如果我可以在每次按下按钮时使用相同的功能，而不是使用三个不同的功能，每个不同的部分一个，那也很好。

我猜代码会类似于（伪）：scroll to top sectiona + 1

【问题讨论】：

你希望它以这种方式运行jsfiddle.net/niranjan_borawake/9uxGq/11 ?

点击时该部分应该移动到页面顶部还是应该滚动到视口顶部？

为什么需要jquery？在您的网址中使用锚标记名称，以指出特定部分。

效果很好，但我希望能顺利过渡

【参考方案1】：

使用 jQuery 和平滑滚动

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

【讨论】：

这是一个很好的干净答案，但我如何让它在我的小提琴中工作？ jsfiddle.net/9uxGq/20

1.您的文档中有未关闭的元素。 2.您的 id 不是唯一的 3.在您的情况下，定义类以在没有锚点的情况下导航会更容易jsfiddle.net/9uxGq/22

【参考方案2】：

为什么不将 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>

【讨论】：

使用这个 $("html, body").animate( scrollTop: $('#sectionNo').offset().top , 1000); ***.com/questions/6682451/…

这将以 1 秒的速度滚动到特定部分的顶部。 1000 是以毫秒为单位的动画速度。

但这需要为每个按钮提供不同的功能，以便硬编码下一个部分编号？

我不知道如何循环执行...但我认为它需要硬编码:(

【参考方案3】：

您也可以尝试以下方法。

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

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

希望这会有所帮助:)

【讨论】：

我很感激，但我不确定如何实现

【参考方案4】：

使用jquery，可以平滑滚动到目标。

这是SAMPLE

JS：

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

【参考方案5】：

您应该首先修复锚点并使用散列片段来允许锚点之间的本地导航。

我创建了一个非常简单的演示让您理解这一点（不使用您的标记来保持简单）。

演示：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>

注意：当然，您可以使用div（或者在您的情况下为section）和@，而不是使用第二个锚点作为标记987654327@。但是，a 更好，因为它对内容导航更具语义，并且意味着 anchor。

一旦完成，这将成为您的后备方案。现在您可以使用 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/

希望对您有所帮助，您可以在标记和用例中解决它。 .