Scroll to div jQuery

Question

I have two functions, one which scrolls to the bottom of my page and another which scrolls back to the top.

I'm looking to add another function which scrolls to a specific div which is almost at the bottom of my page. I have included my two functioning scroll functions below and also my third attempt which doesn't work properly. It scrolls to the bottom of my page and then jumps up to the div.

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   //doesn't work
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

Any advice or suggestions would be greatly appreciated!

do also a console.log() of the offset().top and show us result — steo, Apr 08 '13 at 15:52
I found a simple tut online which included ('html, body'). It works for me so I didn't think I should change it. And in my html the div is actually called .nameSpaceInfo. It definitely exists. I just called it .myDiv here so it would be easier to understand. — Daft, Apr 08 '13 at 15:55

score 1 · Accepted Answer · answered Apr 08 '13 at 15:53

Here is a fiddle and it appears fine to me.

i just added sample div

<span class="btn2">to bot</span>
<span class="btn3">to div</span>
<div class="myDiv"></div>
<span class="btn1">to top</span>
<span class="btn3">to div</span>
.myDiv
{
    height:500px;
    margin-top:500px;
    width:100%;
    background-color:#ccc;
}

i left your script as it is.

score 1 · Answer 2 · 2013-04-08T16:04:28.097

html

<div class="btns">
<button class="btn1">One</button>
<button class="btn2">Two</button>
<button class="btn3">Three</button>
</div>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<div class="myDiv">My Div</div>
<p>stuff</p><p>stuff</p><p>stuff</p>

css

.btns {
    position: fixed;
}

javascript

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   // works
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

example

score 1 · Answer 3 · answered Apr 08 '13 at 16:34

My guess (and that's all it is based on what we have) is that you've confused a div id for a class and have

<div id='myDiv'>

So there's no .myDiv to scroll to.

Either change your html to

<div class='myDiv'>

or your jQuery to (note the #myDiv in the selector)

//should work
$('.btn3').click(function(){
  $('html, body').animate({scrollTop:$("#myDiv").offset().top}, 750);
  return false;
});

score 0 · Answer 4 · answered Apr 08 '13 at 15:52

0

If you have a div and you set an ID on it you can do this in your HTML:

<a href="#yourDiv">Scroll to Div</a>

That should just jump straight to the DIV, and it'll be at the top of the page.

answered Apr 08 '13 at 15:52

Jonny Sooter

2,417
1
24
40

Scroll to div jQuery

4 Answers4