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 this link. It has a few nice functions that work well css-tricks.com/snippets/jquery/smooth-scrolling — user1636130
– user1636130, Commented Jan 25, 2013 at 14:57
Look at stackoverflow.com/questions/5284814/jquery-scroll-to-div and stackoverflow.com/questions/3432656/… — Yoggi
– Yoggi, Commented Jan 25, 2013 at 14:57

JohnJohnGa · Accepted Answer · 2013-01-25 15:13:05Z

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

I get an error in my JS console as soon as I click on the anchor tag- Error: Syntax error, unrecognized expression: ##details
remove "'#'+" from $('#'+$href).offset(); to avoid Error: Syntax error, unrecognized expression: ##details

Community · Accepted Answer · 2017-05-23 12:00:32Z

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?

I tried it. This didn't work for me. Is there something else than providing href="#id" and having divs with these ids.
@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.
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 if you can.

LNendza · Accepted Answer · 2013-01-25 14:59:12Z

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/

lax1089 · Accepted Answer · 2023-11-02 02:14:23Z

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

Need to replace scrollTop with scrollTop() if you are using jQuery 3.x, because scrollTop without parentheses is a property, not a method.
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>

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Linked

Related