Question

我在单页设计上导航时遇到了一些麻烦。以下是我的代码。代码在主页上正常工作。

固定标题不会与部分重叠，效果很好。但是当我在网站的单个页面上，并点击链接到主页上的部分的菜单项时，如<a href="index.html#video"></a>，滚动动画将动画到该部分，但随后固定的标题重叠该部分部分，当你等待3秒时，它会回到正确的位置。

我认为动画会执行2次，但如果这是问题，我现在不会。此外，我想知道如何编码，当用户刷新页面时，它将返回到浏览器窗口的顶部。

JS小提琴：

http://jsfiddle.net/E773g/42/

Answer 1

您可以通过拦截onhashchange事件并调整window的偏移来实现此目的：

(function($){
    if ( "onhashchange" in window ) {
        var hashHandler = function(){
            var hash = window.location.hash.substring( 1 );
            if ( !hash )
                return;

            var offset = 50;
            var sel = '[id="' + hash + '"], a[name="' + hash + '"]';
            var currentOffset = $( sel ).offset().top;

            $( window ).scrollTop( currentOffset + offset );
        };
        window.addEventListener("hashchange", hashHandler, false);
        window.addEventListener("load", hashHandler, false);
    }
})(window.jQuery);

Answer 2

您的问题是动画的完整处理程序。你这样做：

window.location.hash = id;

此方法将滚动条移动到id为“id”的对象，但当然，这会忽略用于计算的偏移量（标题的高度），这就是固定头部重叠您的部分的原因。

我建议您使用虚假ID，如下所示：

window.location.hash = '!' + id;

然后，当你加载页面时......

gotoByScroll(windwo.location.hash.substr(2);

这样，页面中没有带有该ID的元素，并且没有第二个滚动。

希望这有效。

Answer 3

由于您在选择器中同时选择了html和body，因此动画在支持两种元素动画的浏览器上完成两次。为了防止出现这种情况，您需要在动画完成后停止动画。为此，您可以使用stop method，如下所示：

$('html, body').stop(true, true).animate({ scrollTop: target }, 500, function () {
    window.location.hash = id;
});

FIDDLE

编辑：结合我的答案和奥斯卡的答案，我得到的东西似乎可以通过在网址中的锐利之前添加刘海来实现。

FIDDLE

Answer 4

首先保存当前滚动位置，然后更改散列，然后应用保存的滚动位置，然后应用动画。

var target = $(id).offset().top - offset,
    scrollmem = $('html, body').scrollTop();

window.location.hash = id;
$('html, body').scrollTop(scrollmem).animate({ scrollTop: target    }, 500, function () {
  // nothing here
});

http://jsfiddle.net/E773g/34/

如果使用插件不是问题，请使用jQuery ScrollTo插件：http://demos.flesler.com/jquery/scrollTo/

此外，如果您已使用event.preventDefault()，则无需使用return false;来阻止''标记

的默认点击行为

Answer 5

我已经做了另一个解决方案。

// The id of the section we want to go to.
var id = $(this).attr("href"),
    $id = $(id),
    dataID = id.substr(1);

// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(id).offset().top - offset;

    $id.attr('data-id',dataID).attr('id','');
    window.location.hash = id;
    $id.attr('id',dataID);

    $('html,body').animate({scrollTop: target},500);

http://jsfiddle.net/7PKAX/8/

这样做是在更改哈希值之前删除目标元素上的“id”（传递给data-id属性）以防止跳转（因为它没有在文档中找到），然后在之后添加回来改变。

Answer 6

如果你只是需要你的id来定位你的部分，你可以给它们不同于你的主题标签的名称（确保页面中不存在主题标签）;

HTML：

<section id="section-portfolio">...</section>

JS：

var id = $(this).attr("href").substr(1);

var target = $("#section-"+id).offset().top - offset;

FIDDLE

带偏移的哈希位置

6 个答案: