Question

我在每个页面都有一个菜单栏，当我点击其中一个子项时，我希望页面重定向到另一个html并顺利滚动到该特定div。我正在使用此代码使其在一页的div中平滑滚动：

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

有没有办法修改此代码，以便我能够满足我的要求？

Answer 1

使用锚标签和：

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

请参阅：view-source：http://css-tricks.com/examples/SmoothPageScroll/

我找到了捕捉页面的东西

var match = location.hash.match(/^#?(.*)$/)[1];
if (match)
{
   //call you smooth scroll code. Fake the link click etc
}

Answer 2

在搜索解决方案时，通过google和stackoverflow来处理平滑滚动到锚点，很明显存在许多同页解决方案。处理跨多个页面的多个锚点之间的smoothscroll似乎仅限于stackoverflow上的一个QA。然而，所提出的解决方案并不适合我。

虽然我刚刚处理初学者处理java和CSS，但我希望通过将多个解决方案组合成一个至少适用于Firefox和Chrome（在其他浏览器上未经测试）的解决方案来传递我编写的解决方案。

我希望有人可以看看这个，并提出一些建议： 1）使其更具跨浏览器兼容性 2）清理它

最后，以下是我使用它的一些条件没有问题：

多个页面 - 多个锚点 Bootstrap 3 多个jquery函数

虽然我在这里发布了关于砌体和跨页面的多个锚点的警告：Anchors to pages with Masonry layouts

    $(function() {
    $('[data-toggle="elementscroll"]').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 -57 //head space
                }, 1000); //scroll speed
                return false;
            }
        }
    });
});

    $(function() {
$('html, body').hide();
if (window.location.hash) {
        setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                        scrollTop: $(window.location.hash).offset().top -57 // head space
                        }, 1000) //scrollspeed
        }, 0);
}
else {
        $('html, body').show();
}   
    });

平滑滚动到不同html页面中的div

2 个答案: