CODEWITHSUNDEEP
javascriptjqueryhtml
PrivateUser
PrivateUser

Reputation: 4524

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>

Upvotes: 2

Views: 101

Answers (8)

Eric Goncalves
Eric Goncalves

Reputation: 5353

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>

Upvotes: 0

jkozera
jkozera

Reputation: 3066

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

Upvotes: 3

kyle.stearns
kyle.stearns

Reputation: 2346

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/

Upvotes: 0

MG_Bautista
MG_Bautista

Reputation: 2653

Try this...

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

See this JsFiddle Example

Greetings...

Upvotes: 0

Jorge Luis Vargas
Jorge Luis Vargas

Reputation: 174

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

Upvotes: 0

sdespont
sdespont

Reputation: 14025

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

Upvotes: 0

larryr
larryr

Reputation: 1588

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

Upvotes: 0

Pat Burke
Pat Burke

Reputation: 590

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/

Upvotes: 0

Related Questions