CODEWITHSUNDEEP
javascriptjqueryhtmlscroll
Bart Rez
Bart Rez

Reputation: 13

How to animate scroll to div in jQuery?

I've been trying to research that on stack overflow for quite some time now but given that I don't really speak jquery fluently, I can't seem to get it to work.

The question is, how do I scroll smoothly from the top of the page to a div? I have managed to do it in scrollTop, but fail to apply similar code to my scroll to div code.


I have a series of entries in my Portfolio website with links that scroll down to the gallery div:

$(".button7").click(function() {    
$(".g7").show()
$(window).scrollTop($(".g7").offset().top);
return false;
});


And the html:

<div class="button7">
    <div class="gallery"><br>
    <a href="#" style="cursor:s-resize"><i>gallery</i> &darr;</a></div>
    </div>

<div class="g7"><br><br><br><br><br>
    <img src="Images/7.1.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.2.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.3.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.4.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.5.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <img src="Images/7.6.jpg" width="100%" style="display: block;">
    <img src="Images/break.png" width="100%" style="display: block;">
    <br>

    <a href="#" class="scroll" style="cursor:n-resize"><i>back to the top</i> &uarr;</a>
</div>


Scroll top:

$('.scroll').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});


I have managed to make the body move to the .g7 when .button7 is clicked, but every attempt to animate this action fails.

Upvotes: 1

Views: 11582

Answers (1)

Atilla Arda A&#231;ıkg&#246;z
Atilla Arda A&#231;ıkg&#246;z

Reputation: 827

i have similar action in my project and jquery code is like this:

$('html, body').animate({ scrollTop: $('#sonuc_grid').offset().top }, 'slow');

However to move to that div you need to give it a tab index like below:

<div id="sonuc_grid" tabindex=44></div>

that way browser will know where to go

Upvotes: 4

Related Questions