1

我在页面顶部有一个固定的菜单栏，所有菜单链接都是同一页面上的锚链接。简而言之，它是一个单页网站，分为多个部分，其中锚链接作为菜单项。

当单击菜单项时，我正在使用下面的 javascript 平滑滑动到部分。

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

jQuery.fn.anchorAnimate = function(settings) {

    settings = jQuery.extend({
        speed : 1100
    }, 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-60;
            $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
                window.location.hash = elementClick-60
            });
            return false;
        })
    })
}

由于顶部菜单高度为 60 像素，我需要从 offset().top 中减去它以确保幻灯片正常工作。我还必须在位置哈希中减去，否则一旦幻灯片点击完成，就会出现一个生涩的幻灯片（在 FF 和 IE 中，在 Chrome 中工作正常）。

它很好用，但问题是 URL 显示为http://www.site.com/#NaN而不是http://www.site.com/#linkname

这是完整的代码 - http://jsfiddle.net/85saK/1/。不幸的是，点击后它不会显示以#NaN 结尾的URL，而不是实际的链接ID，例如#store、#home 或#contact。

4

1 回答 1

1

尝试：

var destination = $(elementClick).offset().top -60;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() {
    //window.location.hash = elementClick
    elementClick
});
于 2012-06-27T23:34:48.777 回答