0

Ariel Fleslers jQuery LocalScroll pluginを使用しているサイトを構築してい ます。これには、次の 2 つのことを行いたいと考えています。

1) リンクがクリックされたときにアンカーへのスクロールをアニメーション化します
。2) ブラウザの戻るボタンが押されたときに、以前にアクセスしたアンカーまでスクロールします。

スクロールは、コンテンツがあふれているコンテナ内で行われます。

1番は単純明快でした。2番目を達成するために、かなりのグーグルを行いましたが、同様のことをしようとしている人々によるいくつかの投稿に出くわしたにもかかわらず、実際には解決策を見つけられませんでした.

Ben Almans jQuery hashchange イベント プラグインを LocalScroll と一緒に使用 して、目的の結果を達成することになりました。コードは次のようになります。

    $(document).ready(function(){
    $.localScroll({
        hash:true,
        target:'#container',
        duration:500
        }); 

$(window).hashchange( function(){
    var hash = location.hash;

    if (hash === ''){
    location.hash = '#main';
    }

    $.localScroll.hash({
    reset:false,
    hash:true,
    target:'#container',
    duration:500
    });  
    });
    $(window).hashchange();
    });

上記のコードは、コーディングに関してはややハック (しゃれは意図していません) ですが、Firefox、Explorer、Opera で私が望むことを行います。ただし、Chrome と Safari では異なる問題が発生します。

Chrome では、基本的にリンクがクリックされるとスクロールがアニメーション化されますが、ブラウザーの戻るボタンが押されると、トランジションはアニメーション化されずにアンカーにジャンプするだけです。よく調べてみると、たまに戻るボタンをアニメーション化するように見えますが、なぜ時々しかアニメーション化しないのか理解できません.

Safari では、リンクをクリックしても戻るボタンを使用しても、アニメーションせずにアンカーにジャンプします。

hashchange イベント ソリューションを実装する前は、アニメーションは Safari で機能していました。コードは次のようになりました。

 $(document).ready(function() {



$.localScroll({
hash:true,
target:'#container',
duration:500
});
});

Chrome と Safari でこれらの問題を引き起こしている原因について何か考えがある人はいますか? 私が言ったように、私はコーダーではなくデザイナーであり、これは私の能力を本当に伸ばしているので、目前の問題と関係がないかどうかに関係なく、上記のコードで犯した間違いを遠慮なく指摘してください。か否か。

また、これらの素晴らしいプラグインを提供してくれた Ariel と Ben に感謝します。

編集:わかりましたので、別の奇妙なことがあります.ローカルで実行しているテストサーバーにサイトをアップロードすると、Safariでリンククリックのスクロールが機能しますが、オフサーバーで実行するとまったく同じコードが機能しません. いずれにせよ、戻るボタンが押されたときにSafariもChromeもアニメーションをトリガーしないため、問題は残ります。

4

1 に答える 1

1

これらのプラグインの両方で深刻な問題が発生しました。それらは使いにくく、機能が不足していて、バグがあります。

代わりにこの組み合わせを試してください：

スクロール方法をよりスムーズに処理し、HTML5 History APIをサポートし、すべてのブラウザーで機能します。

于 2011-03-04T13:36:40.377 に答える