On link press - scroll?

Question

How can I make it so when you click on a link, it scrolls to a div on the current page. Im trying to make a one-page website (all of the sections will be located on one page)

P;S Heres a example of what im trying to acomplish: http://aresiio.com/

look here http://stackoverflow.com/questions/3163615/how-to-scroll-html-page-to-given-anchor-using-jquery-or-javascript — Keith, Jul 26 '13 at 18:08

Jonny Sooter · Answer 1 · 2013-07-26T18:18:15.350

Like this:

<a href="#placeToScroll">Bananas</a>

<div id="placeToScroll">All my lovely content</div>

In your example, you need to make sure your navigation is set to position:fixed.

This will make your page sort of jump to the section. If you want to add a little animation to make things smooth you can use jQuery:

$("a").on("click", function() {
    href = $(this).attr('href');
    $(document.body).animate({
        'scrollTop': $(href).offset().top;
    }, 1000);
});

score 2 · Answer 2 · answered Jul 26 '13 at 18:12

The preferred way of doing this is with named anchors, not Javascript or CSS.

If you put an anchor element like <a id="section-1"></a> before your div, you can link to it using <a href="#section-1">Jump to Section 1</a> and the browser will scroll there when the link is clicked.

This will also allow bookmarks to link directly to that section.

score 1 · Answer 3 · answered Jul 26 '13 at 18:11

1

you can do that with simple html anchor tag or jquery

http://snipplr.com/view/48385/

http://www.tagindex.net/html/link/a_name.html

answered Jul 26 '13 at 18:11

zod

12,092
24
70
106

score 1 · Answer 4 · answered Jul 26 '13 at 18:15

Every other answer so far is talking about HTML anchor links to named sections of the site, e.g. <a href="#stuff">stuff</a> linking to <div id="stuff">more stuff</div> on the same page.

This does work but it will "jump" directly to the element rather than scroll like the example you linked to. For that functionality you should use a jQuery plugin like the very popular scrollTo.

On link press - scroll?

4 Answers4