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>

Answer 1

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

Answer 2

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?

Answer 3

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/

Answer 4

The accepted answer to this question did not work for me, and there are two main problems in the provided script:

1. Need to replace scrollTop with scrollTop() if you are using jQuery 3.x, because scrollTop without parentheses is a property, not a method.
2. When you want to scroll the html element, you should include it in the selector along with body.

The below corrected javascript is compatible with jQuery 3.x and achieves the desired scrolling effect:

<script>
$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $($href).offset();
    $('html, body').animate({ scrollTop: $anchor.top }, 1000);  // added duration for smooth scrolling
    return false;
});
</script>