Onclick scroll to next div class in Laravel/Blade

Question

Alright so I have a 'Concept' page which has 6 elements, div classes, called Paragraphs. Each paragraph has a heading, a body and a read more link (shown below). Now when I click on that read more link, I want the page to scroll to the next paragraph but I don't really know how I can get my page to do this. Any help would be appreciated. Below is the code I'm currently having.

<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>

So the div class 'read-more-trading' should be linked to the next element called 'media-heading' or 'media-content'. I tried using jquery and javascript but for some reason I'm not getting any further.

Thanks in advance!

Answer 1

I think this is what you are looking for:

jQuery scroll to element

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