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!

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

I think this is what you are looking for:

jQuery scroll to element

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

edited May 23 '17 at 11:51

Community

1
1

answered Nov 09 '15 at 19:25

Salmin Skenderovic

1,204
7
19

This doesn't really work as it's supposed to. It only goes to the first title and then it bugs out.. Any other solutions? – Stefan Neuenschwander Nov 10 '15 at 12:42
I havn't used Laravel/Blade but if there is a way to get the index of the current element, than you can use it as an identifier to the next element. Is the whole code repeated? – Salmin Skenderovic Nov 10 '15 at 13:56
Sorry for the late response, your code did work! Had some bugs on my own side – Stefan Neuenschwander Nov 23 '15 at 17:56

Onclick scroll to next div class in Laravel/Blade

1 Answers1