Geek asks and answers

How to scroll to the div after clicking the "About" or "Contacts" button in my menu?

How to scroll to a div (for example: #about, #contact) after clicking the "About application" or "Contacts" button 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>
+5
source share
4 answers

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 animation, replace

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

by

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

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 my about</div>

...

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

, ( name). , , javascript, jquery. . : HTML- jQuery Javascript?

+4

HTML:

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

CSS :

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

0

More articles:


All Articles