javascript - 单击滚动到 Laravel/Blade 中的下一个 div 类

Question

好吧，我有一个“概念”页面，它有 6 个元素，div 类，称为段落。每个段落都有一个标题、一个正文和一个阅读更多链接(如下所示)。现在，当我单击该阅读更多链接时，我希望页面滚动到下一段，但我真的不知道如何让我的页面执行此操作。任何帮助，将不胜感激。以下是我目前拥有的代码。

<div class="media-body">

    <h4 class="media-heading" id="{{ str_replace(' ', '-', $element['title']) }}" >{{ $element['title'] }}</h4>

    <div class="media-content">{!! $element['textfield'] !!}</div>

    <div class="read-more-trading"><a href="#{{ $element['title'] }}"><img src="/images/arrow-concept.png"  alt="arrow-concept" class="arrow-concept"></a></div>


</div>

因此，div 类“read-more-trading”应该链接到名为“media-heading”或“media-content”的下一个元素。我尝试使用 jquery 和 javascript，但出于某种原因，我没有取得任何进展。

提前致谢!

Answer 1

我想这就是您要找的:

jQuery scroll to element

$('html, body').animate({
    scrollTop: $("{{ str_replace(' ', '-', $element['title']) }}").offset().top
}, 2000);