ansaurus

Question

Answer 1

+1 A:

If I understand what you're looking for...

If you'd like a nice smooth scroll, then the scollTo plugin is a great choice.

If you don't care, just use a hash. location.hash = '#someid';

ScottE 2010-07-27 18:46:37

Yeah, this is exactly what I am looking for. I don't really care about any animation, I just need to get down there when the accordion triggers. I would like to avoid using some extra plugin if possible though.

Thomas 2010-07-27 18:53:07

Answer 2

+1 A:

If you don't want to rely on any plugin, or change the actual URL, you could use scrollTop, see http://api.jquery.com/scrollTop/

Cheers.

peol 2010-07-27 18:54:47

I thought about this, but the content is dynamic, so I am unsure what the hieght will be.

Thomas 2010-07-27 18:57:37

You should have a reference to the wanted element, so you could use $(window).scrollTop( $(wantedelement).offset().top ) -- If I'm not mistaken.

peol 2010-07-27 19:02:42

Ok so I set it up like this:$(document).ready(function(){$(".btn-slide").click(function(){$(window).scrollTop( $("#no").offset().top )});});#no is a the the very bottom of my accordion panel. This doesn't seem to fire. Have I set it up correctly?

Thomas 2010-07-27 19:14:14

Seems to work for me here; http://jsfiddle.net/ZuBZT/ in Chrome. According to the comments on the API site, `scrollTop` can be a little dodgy. You'll have to try with different selectors (although, `window` seems best), here's another one that people seem to use: `$('body,html')`

peol 2010-07-27 19:33:24

Thanks for making an example to look at - Im still having trouble with it. Using your code, I put together my situation here:http://jsfiddle.net/ZuBZT/10/

Thomas 2010-07-28 06:22:04

Hm, might be an issue with $(window) (and jsfiddle); try this one: http://jsbin.com/ifege

peol 2010-07-28 12:14:57

Answer 3

A:

The trick is to use an outer container-div which is scrollable. This allows to find out the size of the inner div which holds the actual content.
My solution (You have to do some adjustments for your accordion):


<html>
   <head>
      <style>
         #container {
            overflow-y: scroll;
            height: 200px; /* defined height */
         }
      </style>
   </head>
   <body>
      <div id="container">
         <div id="content">
            <!-- dynamic content -->
         </div>
      </div>
   </body>
   <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js&quot; ></script>
   <script type="text/javascript">
      function onNewContent() {
         $("#container").scrollTop($("#content").height());
      }

      //test
      $(document).ready(function() {
         for(var i = 0; i < 500; ++i)
            $("#content").append($("<div/>").html(i));
         onNewContent();
      });
   </script>
</html>

fishbone 2010-07-27 20:26:09

ansaurus

tags:

views:

answers:

Automatically scroll down with Jquery?

related questions