How to scroll to div after click on About or Contact in my menu?

Question

How to scroll to div (e.g: #about, #contact) after click on About or Contact in my menu?

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>

Look at http://stackoverflow.com/questions/5284814/jquery-scroll-to-div and http://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery — Yoggi, Jan 25 '13 at 14:57
http://stackoverflow.com/questions/14412157/how-to-scroll-down-the-page-to-view-a-div-in-a-link-clicked/14412200#14412200 — Ashwin Preetham Lobo, Jan 25 '13 at 14:59
Look at this link. It has a few nice functions that work well http://css-tricks.com/snippets/jquery/smooth-scrolling/ — user1636130, Jan 25 '13 at 14:57

JohnJohnGa · Accepted Answer · 2013-01-25T15:13:05.613

10

Your html:

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>
<div id="about">about</div>
<div id="contact">contact</div>

Your javascript:

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    window.scrollTo($anchor.left,$anchor.top);
    return false;
});

If you want to use animate, replace

window.scrollTo($anchor.left,$anchor.top);

by

$('body').animate({ scrollTop: $anchor.top });

edited Jan 25 '13 at 15:13

answered Jan 25 '13 at 14:59

JohnJohnGa

15,446
19
62
87

I get an error in my JS console as soon as I click on the anchor tag- Error: Syntax error, unrecognized expression: ##details – prateekmathur1991 Dec 04 '15 at 06:35
2

remove "'#'+" from $('#'+$href).offset(); to avoid Error: Syntax error, unrecognized expression: ##details – Sumith Harshan Jan 28 '16 at 11:59

score 5 · Answer 2 · edited May 23 '17 at 12:00

5

It is easier than you think.

  <div class="masthead">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
  </div>


<div id="About">Here's my about</div>

...

<div id="Contact">Here's my contact</div>

By using the hash, it'll auto scroll to an element with that id (or an anchor with that name attribute). If you want it to scroll smoothly you can enhance the scroll effect with a javascript library, like jquery. See this question: How to scroll HTML page to given anchor using jQuery or Javascript?

edited May 23 '17 at 12:00

Community

1
1

answered Jan 25 '13 at 14:57

Eli Gassert

9,745
3
30
39

I tried it. This didn't work for me. Is there something else than providing href="#id" and having divs with these ids. – Saurabh Tiwari Jun 01 '17 at 12:18
@SaurabhTiwari The ID has to be unique. And the element has to exist on the page either at the time of load (if you want it to auto-scroll on load) or by the time you click the link. – Eli Gassert Jun 01 '17 at 12:35
yes, I have all that in place. Although I missed to mention that I am using Angular and routing in my app. Have a look [here](https://stackoverflow.com/questions/44307824/unable-to-scroll-to-a-div-element-using-hash-in-angular-app) if you can. – Saurabh Tiwari Jun 01 '17 at 12:41

score 0 · Answer 3 · answered Jan 25 '13 at 14:59

0

You can jump to it with HTML via:

<a href="#tips">Visit the Useful Tips Section</a>

You can do it with CSS via:

http://css-tricks.com/snippets/jquery/smooth-scrolling/

answered Jan 25 '13 at 14:59

LNendza

1,350
1
12
21

How to scroll to div after click on About or Contact in my menu?

3 Answers3

Linked