jQuery smooth scroll to anchor with a fixed menu only works when at page top

Question

I am trying to create a simple one-pager with a fixed menu that smoothly scrolls to my defined anchors along the page.

My issue is that it only scrolls correctly when the page scroll is at the very top. If I click one menu item first and the follow up by clicking on another menu item, it will scroll to what seems to be a very random place on the page.

This only happens when using the smooth-scrolling jQuery script. Deleting the script will cause correct anchor-linking behavior, but unfortunately no lovely, smooth scrolling :(

I have made a fiddle to illustrate this and also a small video .

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

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top - 50
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
  });
});

Answer 1

I made below changes and its working for me. Hope it help you as well.

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

        var target = this.hash;
        var targetHref = $(this).attr('href');  //CHANGE HERE
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $(targetHref).position().top   // CHANGE HERE
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Answer 2

Instead of using a tag for bookmark use div tag and wrap all respective content of section in it, block-element works better in this case.

 // Smooth scroll to anchor-links $(document).ready(function() { $('a[href^="#"]').on('click', function(e) { e.preventDefault(); var target = this.hash; var $target = $(target); $('html, body').animate({ scrollTop: $target.offset().top - 50 }, 900, 'swing', function() { window.location.hash = target; }); }); }); 

 .menu-fixed { width: 100%; height: 50px; background-color: red; color: #fff; position: fixed; top: 0px; left: 0px; margin: auto; text-align: center; } .menu-fixed a { width: 20%; display: inline-block; line-height: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="menu-fixed"> <a href="#link1">Link 1</a> <a href="#link2">Link 2</a> <a href="#link3">Link 3</a> <a href="#link4">Link 4</a> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <div id="link1"> <h1>Link 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> </div> <div id="link2"> <h1>Link 2</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> </div> <div id="link3"> <h1>Link 3</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> </div> <div id="link4"> <h1>Link 4</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta pellentesque velit. Donec mattis lacus in nisl volutpat dapibus. Nulla viverra diam nisl, non scelerisque ligula pretium id. Suspendisse erat tortor, tincidunt nec volutpat et, efficitur id tellus. Quisque congue efficitur imperdiet. Vestibulum nec commodo arcu. Curabitur cursus enim ut dapibus elementum. </p> </div> 

Answer 3

try this:

$(function() { $('a[href*=\\\\#]:not([href=\\\\#])').click(function() { if (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); });

this will work for sure