jQuery scroll content with navigation

Question

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>

@Eric How is that CSS? That's pure HTML...and default browser behavior. And there's already an answer with that explanation... — Ian
– Ian, Commented Jan 23, 2013 at 21:15

Ian · Accepted Answer · 2013-01-23 21:12:14Z

3

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

edited Jan 23, 2013 at 21:12

Ian

51k13 gold badges104 silver badges111 bronze badges

answered Jan 23, 2013 at 20:58

jkozera

3,0662 gold badges18 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ian Over a year ago

I completely agree. Other than animating the scroll, this is how it should be done.

sdespont · Accepted Answer · 2013-01-23 21:06:10Z

0

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

edited Jan 23, 2013 at 21:06

answered Jan 23, 2013 at 21:00

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

Comments

Pat Burke · Accepted Answer · 2013-01-23 21:00:27Z

0

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/

answered Jan 23, 2013 at 21:00

Pat Burke

5905 silver badges13 bronze badges

Comments

larryr · Accepted Answer · 2013-01-23 21:01:35Z

0

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

answered Jan 23, 2013 at 21:01

larryr

1,5883 gold badges17 silver badges29 bronze badges

Comments

Jorge Luis Vargas · Accepted Answer · 2013-01-23 21:06:14Z

0

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

answered Jan 23, 2013 at 21:06

Jorge Luis Vargas

1741 silver badge12 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Try this...

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

See this JsFiddle Example

Greetings...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 23, 2013 at 21:07

MG_Bautista

2,6812 gold badges21 silver badges33 bronze badges

Comments

kyle.stearns · Accepted Answer · 2013-01-23 21:08:29Z

0

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/

answered Jan 23, 2013 at 21:08

kyle.stearns

2,34621 silver badges31 bronze badges

Comments

Eric Goncalves · Accepted Answer · 2013-01-23 21:13:27Z

0

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>

answered Jan 23, 2013 at 21:13

Eric Goncalves

5,3614 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

jQuery scroll content with navigation

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related