Smooth scrolling when clicking an anchor link

0 votes
I have a couple of hyperlinks on my page. A FAQ that users will read when they visit my help section.

Using Anchor links, I can make the page scroll towards the anchor and guide the users there.

Is there a way to make that scrolling smooth?

But notice that he's using a custom JavaScript library. Maybe jQuery offers somethings like this baked in?
Jun 20 in JQuery by gaurav
• 13,460 points
4 views

1 answer to this question.

0 votes
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

This is currently only supported in the most bleeding edge browsers.


For older browser support, you can use this jQuery technique:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});
answered Jun 20 by rajatha
• 4,940 points

Related Questions In JQuery

0 votes
1 answer

jQuery - remove background-color when an element is visible

$("#menu a"). css("background-color", ""); Setting the background-color to "" ...READ MORE

answered Jun 7 in JQuery by Edureka
• 13,640 points
23 views
0 votes
1 answer

How to move an item programmatically with jQuery sortable while still triggering events?

Hello, $("selector").trigger("sortupdate"); you will have to  pass as second argument  ...READ MORE

answered May 29, 2020 in JQuery by Niroj
• 82,720 points
1,978 views
0 votes
1 answer

How can I select an element with multiple classes in jQuery?

Hello @kartik, If you want to match only ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,720 points
1,234 views
0 votes
1 answer

How to insert an item into an array at a specific index?

Hello @kartik, You can implement the Array.insert method by doing ...READ MORE

answered Sep 10, 2020 in JQuery by Niroj
• 82,720 points
715 views
0 votes
1 answer

Smooth scroll to div id jQuery

You need to animate the html, body $("#button").click(function() { ...READ MORE

answered Jun 23 in Web Development by rajatha
• 4,940 points
5 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
294 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
8,335 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,720 points
15,187 views
0 votes
1 answer

How to trigger a click on a link using jQuery

$( "#foo" ). trigger( "click" ); As of jQuery ...READ MORE

answered Jun 10 in JQuery by rajatha
• 4,940 points
13 views
0 votes
1 answer

How to trigger a click on a link using jQuery

Use the jQuery click() Method You can use ...READ MORE

answered Jun 10 in JQuery by rajatha
• 4,940 points
13 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP