How to Scroll to Specific Item Using 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>

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 do I scroll to an element within an overflowed Div?

The $innerListItem.position().top is actually relative to the .scrollTop() of its first positioned ancestor. So the way to calculate the correct $parentDiv.scrollTop() value is to begin by making sure that $parentDiv is positioned. If it doesn't already have an explicit position, use position: relative. The elements $innerListItem and all its ancestors up to $parentDiv need to have no explicit position. Now you can scroll to the $innerListItem with:

// Scroll to the top
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top);

// Scroll to the center
$parentDiv.scrollTop($parentDiv.scrollTop() + $innerListItem.position().top
    - $parentDiv.height()/2 + $innerListItem.height()/2);

Scroll to specific item using JS/Jquery

Try this:

$(".letters li a").click(function() {
  var container = $('.right'),id = $(this).attr('href'),
    scrollTo = $(id);

  container.animate({
    scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
  });
});

Click on any of the alphabet in the demo and you can see the result.

Working Demo

scroll to specific element on page using jquery

UPDATE

Try this one, if you want a menu and menu links to specific page. It will scroll to your page with curtain effect.

DEMO http://jsfiddle.net/yeyene/mCytP/2/

Add menu outside of ol, then add links with your li page id in href.

<div id="menu">
    <ul>
        <li><a href="#home" class="curtain-links curtain-links-active">Home</a></li>
        <li><a href="#about_us" class="curtain-links">About Us</a></li>
        <li><a href="#portfolio" class="curtain-links">Portfolio</a></li>
        <li><a href="#programs" class="curtain-links">Programs</a></li>
     </ul>
</div>

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);
});

Scroll to specific item in Checkbox List using jQuery

i think this should work for you just fine unless if it's not exactly what u are aiming at

container.animate({scrollTop:$('#"' + word + '"').top});

or this should be what you needed. this for the page to scroll to that element

$('html, body').animate({scrollTop:$('#"' + word + '"').top})