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, 2022 in JQuery by gaurav
• 23,260 points
2,233 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, 2022 by rajatha
• 7,680 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, 2022 in JQuery by Edureka
• 13,690 points
3,253 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,840 points
4,282 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,840 points
3,465 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,840 points
1,746 views
0 votes
0 answers

Smooth scrolling when clicking an anchor link

My page has a few hyperlinks. When ...READ MORE

Jul 22, 2022 in CSS by Edureka
• 13,620 points
532 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, 2022 in Web Development by rajatha
• 7,680 points
3,262 views
0 votes
0 answers

Scroll to an element with jQuery

I have this input element: <input type="text" class="textfield" ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
512 views
0 votes
0 answers

How to scroll to top of page with JavaScript/jQuery?

Is there a way to control browser ...READ MORE

Jul 1, 2022 in Web Development by gaurav
• 23,260 points
2,275 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, 2022 in JQuery by rajatha
• 7,680 points
736 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, 2022 in JQuery by rajatha
• 7,680 points
1,760 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP