4

ユーザーがページを下にスクロールすると表示される「トップに戻る」ボタンがあります。
いくつかの助けを借りて、これらの機能を以下のコードに実装することができました: 下 にスクロールした後の特定のポイントでのフェードイン、アニメーションでスクロールしてトップに戻る、ページのすべての href="#" リンクへのアニメーションでスクロールする。

    $('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 800, 'swing', function () {
        window.location.hash = target;
    });
});

var $win = $(window);

$win.scroll(function () {

    if ($win.scrollTop() > 300) {
        b.fadeIn();
        console.log("fadding in")
    } 
    else {
        b.fadeOut();
    }
  });

});

これが実際のサンプルです: http://jsfiddle.net/q8DUC/8/

私の問題は、ボタンがページのフッターにスクロールすることです...基本的に、「トップに戻る」は「フッター」DIVの30px上で停止する必要があります。しかし、私はそれを達成する方法を見つけることができません。私は周りを見回しましたが、既存のコードで動作するものは見つかりませんでした。

助けや提案をありがとう！

アップデート：

もう少し: http://jsfiddle.net/q8DUC/20/
ボタンのジャンプを避ける方法がわからない!
ボタンを上部ではなく下部に貼り付ける方法はありますか?

いつものように、すべての提案やヘルプに感謝します!

4

1 に答える 1

4

フッターの場所を取得して、ボタンを表示するかどうかを確認する条件に追加できると思います。

// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work

if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {

申し訳ありませんが、ボタンに固定配置を使用しているため、質問を間違って読みました。次のようなものを実装できます。

  1. フッターの高さ + 30px を取得
  2. フィドルに基づいて、ドキュメントに関連するフッターの位置を取得します ~2000px (FOOTER_START)
  3. ウィンドウの上部の位置が > 300 であり、かつ (FOOTER_START) より大きい場合は、#back-top bottomプロパティをフッターの高さに変更します
于 2013-10-21T23:27:11.360 に答える