3

水平スクロールのウェブサイトを作成しています。自動スクロールにこのjQueryプラグインを使用しています。以下はコードです。

HTML

<head>
<link type="text/css" rel="stylesheet" href="stylesheets/styles.css" />

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>

<div id="container">

<div id="navigation">
    <ul>
        <li>
            <div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div>
        </li>
        <li>
            <div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div>
        </li>
    </ul>
</div><!-- end of navigation -->


<div id="firstMark"></div>

<div id="secondMark"></div>

<div id="thirdMark"></div>

</div>

</body>
</html>

CSS

@charset "utf-8";

ul li { list-style-type:none; }

/* navigation */
#navigation { position:fixed; z-index:5; bottom:80px; left:-26px; background-color:#FFF; width:70px; height:190px; border-top-right-radius:10px; border-bottom-right-radius:10px; }

.menubutton { float:left; width:20px; height:20px; border-radius: 50%; background-color:#F00; margin-bottom:15px; }

.menubutton:hover { cursor:pointer; }

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

#homeLink:hover { background-color:#006DB4; }
#aboutLink:hover { background-color:#99005E; }
#musicLink:hover { background-color:#FFC61A; }
#brandsLink:hover { background-color:#333; }
#contactLink:hover { background-color:#F60; }


#container {
    position:absolute;
    width:10000px;
    height:100%;
    background-color:#FFC;  
    top:0;
    left:0;
}

#firstMark {
    position:absolute;
    width:1px;
    height:1px;
    left:3000px;    
}

#secondMark {
    position:absolute;
    width:1px;
    height:1px;
    left:6000px;    
}

#thirdMark {
    position:absolute;
    width:1px;
    height:1px;
    left:9000px;    
}

JavaScript

$(document).ready(function(e) {

    $('#homeLink').click(function(e) {
        e.preventDefault();
        $.scrollTo(0,0, {duration: 2000});
    });

    $('#aboutLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#firstMark', {duration: 2000});
    });

    $('#musicLink').click(function(e) {
        e.preventDefault();
        $.scrollTo('#secondMark', {duration: 2000});
    });

});

こちらがデモページへのリンクです。これはFirefox（v18）、Opera（v12）、Safari（v5.1.2）、さらにはInternet Explorer 9でも機能しますが、Chrome（v24）では機能しません。

何が足りないのか誰か教えてもらえますか？それは私のコードに何か問題があるのですか、それともプラグインのバグですか？

それができない場合は、水平スクロールもサポートする自動スクロールに代わるものがあるかどうか教えてください。

ありがとうございました。

4

4 に答える 4

4

古い質問ですが、私の経験を書き留めておきます。http://flesler.blogspot.com/2007/10/jqueryscrollto.htmlからダウンロードしたプラグインで同じ問題が発生しました

この記事のプラグインは古くなっています。最新バージョンはhttps://github.com/fleslerからダウンロードできます。

また、あなたも変わる必要があります

$.scrollTo(0,0, {duration: 2000});

に

$.scrollTo("0px","0px", {duration: 2000});

于 2013-05-02T08:02:20.700 に答える
2

アンカーはclick、divではなくイベントを受信して​​いる可能性があります。

これを簡単に試してみてください。

$('#homeLink a').click(function(e) {
    e.preventDefault();
    alert('click');
    $.scrollTo(0,0, {duration: 2000});
});

alert('click')が検出されたかどうかがわかるように、も追加しました。

于 2013-01-27T09:17:13.947 に答える
1

pxを使用してみて値をスクロールします

変化する

 $.scrollTo(0,0, {duration: 2000});

に

 $.scrollTo(0px,0px, {duration: 2000});
于 2013-01-27T09:17:12.217 に答える
0

バグは、体をアニメーション化する Webkit の機能にあります。代わりに、ボディのすぐ内側に div を作成し、代わりにこれにアニメーションを適用します...

<body>
    <div class="wrapper">
        <nav>
            <a class="scroll-to-id" href="#" data-target="section1">Section 1</a>
            <a class="scroll-to-id" href="#" data-target="section2">Section 2</a>
        </nav>
        <section>
            <a id="section1">&nbsp;</a>
            <p>Some content<p>
        </section>
        <section>
            <a id="section2">&nbsp;</a>
            <p>Some more content<p>
        </section>
    </div>
</body>

注:私の個人的な経験では、ID は冗長ではなくタグに効果的に適用できますが、これはまだ機能します...一部のユーザーが ID を上位にターゲティングする際の問題を指摘したため、この例ではこの方法のみを使用しました。これよりDOMツリー...私は個人的にその問題を再現できなかったので、どちらの方法でも機能します!

次に、正しく動作するようにラッパー要素と本体のスタイルを設定します

body { position:relative; }

.wrapper { overflow:auto; position:absolute; top:0; height:100%; width:100%; }

次に、jQuery

$('.scroll-to-id').on('click', function(event) {
    event.preventDefault();
    var target = "#" + $(this).data('target');
    $('.wrapper').animate({
        scrollTop: $(target).offset().top
    }, 1500);
});
于 2014-02-26T16:49:22.563 に答える