jquery .offset().top - 一定数量的像素（FF 和 IE 的问题）答案

【问题标题】：jquery .offset().top - a set amount of pixels (issues with FF and IE)jquery .offset().top - 一定数量的像素（FF 和 IE 的问题）
【发布时间】：2013-01-03 20:12:54
【问题描述】：

所以我正在使用 Cedric Dugas 的 Anchor Slider。发生的情况是有人单击一个链接并将页面向下滚动到与链接的 href 具有相同 ID 的元素......所有标准的东西。

但我想要发生的是让它在该 id 上方约 80 像素处停止......所以这就是我所拥有的。

$(document).ready(function() {
    $("a.anchorLink").anchorAnimate()
});

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 500
    }, settings);   

    return this.each(function(){
        var caller = this
        $(caller).click(function (event) {  
            event.preventDefault()
            var locationHref = window.location.href
            var elementClick = $(caller).attr("href")

            var destination = $(elementClick).offset().top - 80;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick
            });
            return false;
        })
    })
};

这是将其向上移动 80 像素的代码行

var destination = $(elementClick).offset().top - 80;

问题是它在 webkit 浏览器中运行良好，但在 FF 和 IE 中，它会在 80 像素以上停止，然后突然向下移动到正常停止的位置。

有人知道为什么会这样吗？

谢谢！

【问题讨论】：

网上有例子吗？也许一个使用jsfiddle.net？

标签： jquery internet-explorer firefox offset

【解决方案1】：

这是浏览器的自然行为。当您访问包含片段的 url 时，浏览器会尝试导航到与片段对应的元素。所以https://stackoverflow.com/#h-recent-tags 会导致浏览器向下（或向上）滚动到 ID 为 h-recent-tags 的元素。

您的代码在发出以下命令时指示浏览器导航到该元素：

window.location.hash = elementClick;

这发生在你的动画完成之后，这就是你看到浏览器立即从原来的位置跳起来的原因。

为了获得您想要的效果，需要采用不同的方法。在较新的浏览器中，您最好使用pushState，而不是直接篡改片段：

history.pushState(null, null, elementClick);

这将更新哈希，而不影响页面。但请注意，这只适用于现代浏览器。对于旧版本的 IE，您需要采取不同的方法。一种这样的方法是回退到使用 location.hash 方法，但在滚动之前设置散列：

$(caller).on("click", function (event) {
    // Prevent default behavior of anchor
    event.preventDefault();

    // Get href value from anchor clicked
    var elementClick = $(caller).attr("href");

    // If the browser supports the History api, use it to update hash
    // Otherwise update hash before we animate the scrolling
    if (history && history.pushState) {
        history.pushState(null, null, elementClick);
    } else {
        window.location.hash = elementClick;
    }

    // Determine where 80px above target is
    var destination = $(elementClick).offset().top - 80;

    // Scroll to that new location
    $("html:not(:animated),body:not(:animated)").animate({
        scrollTop: destination
    }, settings.speed);
});

在旧版浏览器中，这会导致立即转到目标位置，然后慢慢向上滚动以提供一些填充。

【讨论】：

【解决方案2】：

缺少很多分号。因此，某些浏览器可能会误读代码。将脚本粘贴到 jshint 以查看所有缺少的分号。

编辑

虽然上面是一个问题，但我正在改变我的答案。我敢打赌它实际上来自设置 window.location.hash 的行。这样做可能会导致某些浏览器跳转到文档中的该点，这会在动画结束后立即发生。

这可能是在不删除该行的情况下“修复”它的唯一方法：

var destination = $(elementClick).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
    window.location.hash = elementClick;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination - 80 }, settings.speed);
});

换句话说，一直向下滚动到锚点，然后设置哈希值，然后再向上滚动一点。您可以使用缓动使其看起来更平滑。

【讨论】：