jQuery scroll content with navigation

Can someone tell me how to scroll the content. For example I have a link like this

<a href="#">content3</a>

When the user click that link I would like to scroll the content to div content3.

Can someone tell me how to do this using jQuery?

Here is my full code.

<div class="container">
<div class="nav">
    <ul>
        <li><a class="active" href="#">content1</a></li>
        <li><a href="#">content2</a></li>
        <li><a href="#">content3</a></li>
        <li><a href="#">content4</a></li>
    </ul>
</div>
<div id="content">
<div id="content1" class="content1">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content2" class="content2">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content3" class="content3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="content4" class="content4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>

Answers


Using scrollTop :

Example :

<a scrollTo="content3" href="#">click me to scroll to the div "content3"</a>

$(document).ready(function(){
    $('a').on('click',function(){
        $("#container").animate({ scrollTop: $('#'+$(this).attr('scrollTo')).offset().top }, 1000);
    });
});

You don't need jQuery to do this - simply use href="#content3" to scroll to the element with an id of "content3".


jQuery has scrollTop and scrollLeft methods to do this.. if it is merely vertical scrolling, then scrollTop(yVal) will do the trick

http://api.jquery.com/scrollTop/


Don't know what you are attempting to do, but go check out wowslider.com


Using the $('body').scrollTop atribute like so:

$('#button1').click(function(){
    var element = $('#content1'),
    elemTop = element.offset().top, // You get the element top to know where to move the window
    windowTop = elemTop + 20; // You can add some pixels so the element dont be shown on the very edge
    $("html, body").animate({
           scrollTop:  windowTop // Animate the change so it doesnt seem invasive
    }, "fast");
    }
});

Try this...

$('a').on('click', function (){
    $('html,body').animate({
        scrollTop: $('#'+$(this).text()).offset().top},
    'slow');
});

See this JsFiddle Example

Greetings...


Based on your markup it appeared you wanted to use the anchor text to determine where to scroll. If you click the content1 link it will scroll you to <div id="content1">.

$('.nav ul li a').click(function(){

    $('html, body').animate({
        scrollTop: $('#' + $(this).text()).offset().top
    }, 2000);

});

Heres a fiddle as an example: http://jsfiddle.net/ZG3zh/


In order to scroll with HTML you need to set the href of the anchor #+'id of element' you are scrolling to.

Example: I want to scroll to <div id="scrollHere">Hello World</div> using an anchor tag or a use the code, <a href="#scrollHere">Click Me!</a>


Need Your Help

Input text file of strings and integers

python arrays string integer

I have a data file (ordered_data.txt) composed of 8 columns of integers and the last column is a string. It is 2912 rows long. I am inputting the data like so:

Source Control on the IBM i (iSeries)

version-control ibm-midrange rpgle

On the web side we are working on getting source control. Now, I want to see what can be done for the iSeries side. What is your favorite source control application for iSeries and why? I am lookin...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.