Question

我正在尝试使用平滑滚动并采用我在网上找到的示例。这是我的代码的小提琴

我将特殊条件设置为html和body（基本上是将页面上下文从顶部偏移50px以避开导航栏）。因此，平滑滚动不起作用。有人知道解决方案吗？谢谢卡尔

$(document).ready(function() {
$('a[rel="relativeanchor"]').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
    return false;
}); 
});

Answer 1

这就是你要追求的吗？

$(document).ready(function () {
    if(!/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())){
        $('html').css({'overflow-x':'auto','overflow-y':'hidden'});
    }
    $('a[rel="relativeanchor"]').click(function () {
        var $el = $($(this).attr('href'));
        $('html, body').stop().animate({
            scrollTop: $el.prop('offsetTop')
        }, 2000);
        return false;
    });
});

JSFiddle

CSS需要更新。 Chrome的html溢出已被删除，否则，这在Chrome中无效。但是，Firefox需要溢出，因此可以通过在JavaScript中动态设置它们来设置（如果不是chrome则设置）。

如果要保持偏移量，请从计算的偏移量中减去它。鉴于上述情况，$el.prop('offsetTop') - 50增加了50px以上。

Answer 2

此问题似乎与Chrome滚动<body>与height:100%的方式有所不同。这里讨论的问题是：Body set to overflow-y:hidden but page is still scrollable in Chrome

一个可行的解决方案是将滚动内容包装在<div class="content">中并禁用<body>上的滚动。

这是一个JSFiddle来演示更新的行为：https://jsfiddle.net/f1zv1c5k/5/

要使滚动停在适当的位置，您需要在滚动时减去应用于<html>标记的垂直偏移量（使用@ vol7ron推荐的$el.prop('offsetTop')）。你的平滑滚动功能如下所示：

$('a[rel="relativeanchor"]').click(function(){
    var $el = $($(this).attr('href'));
    $('.content').animate({
        scrollTop: $el.prop('offsetTop')
    }, 2000);
    return false;
});

平滑滚动不适用于溢出-y

2 个答案:

JSFiddle