CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Randy Mad-Dog
Randy Mad-Dog

Reputation: 43

Jquery Scrolling to ID or Anchor - scrolls to top if already there?

I've been looking trying to find the reason and/or a solution to this. I've been using 

$("#content").animate({scrollTop:$(#elementId).offset().top-183}, 600);

for smooth scrolling to an ID in a <div>. The 183 is an offset so my element is at the top. It works, but if I click it again when I am already there it scrolls back up to the top. If I click it when I'm below the element, it doesn't work correctly. It only works correctly if I am above the element.

Is "scrolltop" not the correct jQuery routine for this in all cases? Or do I need to determine if the element is above or below me and use a different command accordingly? It seems there is not much documentation to this behavior and I have only found a couple of people mention it. Perhaps I am missing something simple that solves this problem? I will try to make a JSfiddle that illustrates this behavior, but thought maybe someone on here has seen this before and has a tip how to solve it?

Upvotes: 1

Views: 328

Answers (2)

just95
just95

Reputation: 1099

It looks like when you scroll the offset of the element within #content changes. This is why the top offset of the target element is zero when it is already in view. To get the right value for scrollTop you have to add the current value of scrollTop to the offset.

$('#scroll').click(function() {
  $("#content").animate({scrollTop:$("#content").scrollTop() + $('#target').offset().top-10}, 600);
});
#content {
  max-height: 100px;
  overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>
  
  <div id="target">
    Hello, World!
  </div>
  
  <pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
  Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
  varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
  primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit
  laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
  senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
  elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
  consectetur lorem tincidunt at. Suspendisse ac finibus sapien.
  </pre>

</div>
<button id="scroll">Scroll to #target</button>

Upvotes: 1

Pro Dev
Pro Dev

Reputation: 684

This might help, I usually use this simple javascript snippet for scrolltotop/backtotop feature in my site.

HTML

<body id="top">

<a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>


JS

<script>
var timeOut;
function scrollToTop() {
    if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
        window.scrollBy(0,-50);
        timeOut=setTimeout('scrollToTop()',10);
    }
    else clearTimeout(timeOut);
}
</script>

Upvotes: 0

Related Questions