Return to previous page

Smooth Scroll to anchor on page - by kumapanda

This topic has 4 replies, 2 voices, and was last updated 7 years, 2 months ago ago by Laranz

kumapanda

Participant

September 13, 2017 at 16:17
Hello,

Can you tell me how can I link to a section with an anchor and have an smooth scroll effect. So that the page scrolls slowly down when I click on the link. I don’t want to use One page navigation. I only want to have a link
```
<a href="#anchor">text</a>
```
when user click on that link the site scrolls down to:
```
<div id="anchor">....>/div>
```
Is there some build in javascript in your theme I can use/ call without adding more javascript.

THANK YOU!
#172367 Copied
3 Answers

Laranz

Participant

September 14, 2017 at 04:09

Hi there,
I am delighted to assist you today. You can use this javascript code to get this feature.
$(‘a[href*=#]’).click(function(event){
$(‘html, body’).animate({
scrollTop: $( $.attr(this, ‘href’) ).offset().top
}, 500);
event.preventDefault();
});

Hope I was able to help you with your concern.

#172388 Copied

kumapanda

Participant

September 14, 2017 at 11:20

How can I limit this to a specific link? Can I add a link class somehow? Thank you :)!!!

#172435 Copied

Laranz

Participant

September 15, 2017 at 10:53

Hi,

Yes, you can change the selector of that script to your desired needs.

$(‘a[href*=#]’) to $('.anchor')

Let us know,

Thanks,
laranz.

#172535 Copied
Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder

Coffee Store – WooCommerce Theme

lazy-placeholder

Language Courses – WordPress WooCommerce Theme

lazy-placeholder

Industrial Power Tools Store – WordPress WooCommerce Theme

lazy-placeholder

Designers – WordPress Theme

lazy-placeholder

Marseille04 – WordPress WooCommerce Theme

lazy-placeholder

Plumbing Store – WordPress WooCommerce Theme

lazy-placeholder

Minimal Fashion 02 Store – WordPress WooCommerce Theme

lazy-placeholder

Spice Store – WordPress WooCommerce Theme

lazy-placeholder

Lawyer – WordPress WooCommerce Theme

lazy-placeholder

Pub – WordPress Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.