1

ユーザーがいくつかの異なるリンクをクリックしたときにウィンドウをスクロールするために、次のコードを使用しています。

$(document).ready(function(){
$("#footerlink").click(function(){
    $("#slide1").slideto({});
});
$("#logo").click(function(){
    $("#slide1").slideto({});
});
$("#home").click(function(){
    $("#slide1").slideto({});
})      
$("#others").click(function(){
    $("#slide2").slideto({});
})
$("#me").click(function(){
    $("#slide3").slideto({});
});
$("#laughs").click(function(){
    $("#slide4").slideto({});
});
})

スライド機能は、次のスクリプトから取得されます。

(function(b) {
b.fn.slideto = function(a) {
    a = b.extend({
        slide_duration: 1000,
        highlight_duration: 3E3,
        highlight: false,
        highlight_color: "#FFFF99"
    }, a);
    return this.each(function() {
        obj = b(this);
        b("body").animate({
            scrollTop: obj.offset().top
        }, a.slide_duration, function() {
            a.highlight && b.ui.version && obj.effect("highlight", {
                color: a.highlight_color
            }, a.highlight_duration)
        })
    })
}
})(jQuery);

私の問題は、スクロールがChromeでのみ機能し、FirefoxやIEでは機能しないことです。FFとIEはうまく劣化するので、リンクは引き続き機能しますが、私はスクロールアニメーションが本当に好きです。

参考：私は次の2行でJqueryを呼び出しています。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

これが私のコードのフィドルです：http： //jsfiddle.net/LwXR3/

問題を突き止めるのを手伝ってもらえますか？

4

1 に答える 1

0

さて、これはコメントに入れるには長すぎます。上記のコードでは、コピーと貼り付けの混乱を本当に避ける必要があります。コードはIDを除いてほぼ同じです。場所をハードコーディングする代わりに、hrefを使用して場所を取得します。

HTML

<a class="slideLinks" href="#foo">go to foo</a>

JavaScript

$(".slideLinks").on("click", function(e){ 
    e.preventDefault(); //p[revent the click
    $(this.hash).slideto({}); //call your slide to function with the hash value for the id
});
于 2012-09-11T18:37:09.413 に答える