1

ページの上部に固定メニューバーがあり、すべてのメニューリンクは同じページのアンカーリンクです。要するに、それはメニュー項目としてアンカーリンクを持つセクションに分割された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/#linknameではなくhttp://www.site.com/#NaNとして表示されることです。

これが完全なコードです-http://jsfiddle.net/85saK/1/。残念ながら、クリックした後、実際のリンクIDではなく#NaNで終わるURL（＃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 に答える