jQuery平滑滾動以使用固定菜單進行錨定僅在頁面頂部有效

Question

我正在嘗試創建一個帶有固定菜單的簡單單頁程序，該菜單可以平滑地滾動到頁面上我定義的錨點。

我的問題是，只有頁面滾動在最頂部時，它才能正確滾動。 如果我先單擊一個菜單項，然后再單擊另一個菜單項，則它將滾動到頁面上看起來非常隨意的位置。

僅在使用平滑滾動的jQuery腳本時才會發生這種情況。 刪除腳本將導致正確的錨鏈接行為，但不幸的是，沒有可愛，流暢的滾動:(

我做了一個小提琴來說明這一點，還有一個小錄像 。

$(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

我做了以下更改，它為我工作。 希望它也對您有幫助。

$(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

在這種情況下， block-element效果更好，而不是a標簽用於書簽，而將div標簽包裝在其中，並將其包裝在其中。

 // 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

嘗試這個：

$(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; } } }); });

這肯定可以工作