单击滚动到下一个 div class in Laravel/Blade

Question

好吧，我有一个 'Concept' 页面，其中有 6 个元素，div classes，称为段落。每个段落都有一个标题、一个 body 和一个阅读更多 link（如下所示）。现在，当我单击阅读更多 link 时，我希望页面滚动到下一段，但我真的不知道如何让我的页面执行此操作。任何帮助，将不胜感激。以下是我目前拥有的代码。

<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 class 'read-more-trading' 应该 linked 到下一个名为 'media-heading' 或 'media-content' 的元素。我尝试使用 jquery 和 javascript 但由于某种原因我没有进一步。

提前致谢！

Answer 1

我想这就是您要找的：

jQuery scroll to element

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

单击滚动到下一个 div class in Laravel/Blade

Onclick scroll to next div class in Laravel/Blade

html

javascript

css

laravel

blade