平滑滚动以与锚链接

Question

I'm looking for way how to add smooth scroll for link like example.com/subpage#anchor.
I'm trying to used this code

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

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500);
});

but it does not work for example.com/subpage#anchor

Answer 1

Actually, your logic appear to run fine without any modification.

 $(document).on('click', 'a[href^="#"]', function(event) { event.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 500); }); 

 #container menu { position: fixed; top: 0; left: 0; right: 0; margin: 0; padding: 0; background-color: rgb(128, 128, 128); } menu li { display: inline-block; min-width: 32.75%; text-align: center; background-color: rgb(152, 152, 152); } #home, #aboutUs, #contact { display: block; min-height: 600px; } #home { background-color: red; margin-top: 19px; } #aboutUs { background-color: green; } #contact { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <menu> <li><a href="#home">Home</a></li> <li><a href="#aboutUs">About Us</a></li> <li><a href="#contact">Contact Us</a></li> </menu> <div id="home"></div> <div id="aboutUs"></div> <div id="contact"></div> </div>