0

ブラウザウィンドウの下部に到達したとき、つまりユーザーがページを完全に下にスクロールしたときに、トップに戻るリンクを位置 X (フッター上部) までスライドさせる方法は?

現在、私のページには、ウィンドウの下部に固定された、機能しているトップへ戻るリンクがあります。ただし、ページの最後にフッターがあり、トップに戻るリンクは、ブラウザー ウィンドウの下部ではなく、ページの最後にあるフッターの上にとどまる (または元に戻る) 必要があります。

Toplink のスクリプトは次のとおりです。

//plugin
jQuery.fn.topLink = function(settings) {
  settings = jQuery.extend({
    min: 1,
    fadeSpeed: 200
  }, settings);
  return this.each(function() {
    //listen for scroll
    var el = $(this);
    el.hide(); //in case the user forgot
    $(window).scroll(function() {
      if($(window).scrollTop() >= settings.min)
      {
        el.fadeIn(settings.fadeSpeed);
      }
      else
      {
        el.fadeOut(settings.fadeSpeed);
      }
    });
  });
};

//usage w/ smoothscroll
$(document).ready(function() {
  //set the link
  $('#top-link').topLink({
    min: 400,
    fadeSpeed: 500

  });
  //smoothscroll
  $('#top-link').click(function(e) {
    e.preventDefault();
    $.scrollTo(0,500);
  });
});
4

1 に答える 1

0

次のように、ユーザーが一番下のページまでスクロールしたかどうかを確認できます。

$(window).scroll(function() {           
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
      console.log("bottom reached");
   }            
});

最下部に達した場合は、リンクの位置を好きなように設定したり、アニメーション化して少し上にジャンプしたりできます。

于 2012-11-23T09:55:11.937 に答える