Scroll to an Element With Jquery

Scroll to an element with jQuery

Assuming you have a button with the id button, try this example:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>

Smooth scroll to div id jQuery

You need to animate the html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

How to scroll to specific item using jQuery?

Dead simple. No plugins needed.

var $container = $('div'),
    $scrollTo = $('#row_8');

$container.scrollTop(
    $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);

// Or you can animate the scrolling:
$container.animate({
    scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});

Here is a working example.

Documentation for scrollTop.

How to scroll to an element in jQuery?

Check jQuery.ScrollTo, I think that's the behavior that you want, check the demo.

How do I get an element to scroll into view, using jQuery?

Since you want to know how it works, I'll explain it step-by-step.

First you want to bind a function as the image's click handler:

$('#someImage').click(function () {
    // Code to do scrolling happens here
});

That will apply the click handler to an image with id="someImage". If you want to do this to all images, replace '#someImage' with 'img'.

Now for the actual scrolling code:

Get the image offsets (relative to the document):

var offset = $(this).offset(); // Contains .top and .left

Subtract 20 from top and left:
```
offset.left -= 20;
offset.top -= 20;
```

Now animate the scroll-top and scroll-left CSS properties of <body> and <html>:

$('html, body').animate({
    scrollTop: offset.top,
    scrollLeft: offset.left
});

scroll to element with jquery

what I've understood from your question is, you want to scroll to the bottom of the page, so you could use this:

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

if you want to scroll to particular ID the you can use this:

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

jQuery: Scroll to the center of the element

You can use the height of the element.

scrollTop: $(this).offset().top + $(this).height() / 2;

Add the half of the height of the element to the scrollTop to scroll to the center of the element.

jQuery Scroll to Div

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Check this link: http://css-tricks.com/snippets/jquery/smooth-scrolling/ for a demo, I've used it before and it works quite nicely.

How to scroll fixed element with JQUERY animate scrollTop?

This was a little tricky.

It's the parent of your "#content" that is what has the scroll bar.

This should work: $("#content").parent().animate({scrollTop: 1000}, 1000)

Scroll to an Element With Jquery