Question

我正在尝试使用固定菜单创建一个简单的单页面，该菜单可以平滑地滚动到页面上定义的锚点。

我的问题是它只在页面滚动位于最顶端时才能正确滚动。如果我先单击一个菜单项并通过单击另一个菜单项进行跟进，它将滚动到页面上看似非常随机的位置。

这只在使用平滑滚动的jQuery脚本时才会发生。删除脚本将导致正确的锚链接行为，但遗憾的是没有可爱，平滑的滚动:(

我已经制作了一个fiddle来说明这一点以及一个小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

我做了以下更改并为我工作。希望它也能帮到你。

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

不使用var result = Regex.Replace(str, @"@([0-9a-zA-Z]{1,3})#\z", "$1");标记用于书签使用a标记并将其中的所有相应内容包装在其中，div在这种情况下效果更好。

block-element

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

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

这肯定会有用

jQuery平滑滚动到锚定与固定菜单只在页面顶部工作

3 个答案: