0

このコードには 2 つの部分があります。

最初のものは、ユーザーが下にスクロールすると .toTop ボタンにフェードインし、それ以外の場合は非表示のままにすることになっています。

2 番目の部分は、クリックしたときにユーザーを一番上に表示することになっています。

パート 2 は、パート 1 と混合すると機能しません。2つの間の競合を見つけることができません。

<script>
    $(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

        var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });      
</script>
4

2 に答える 2

0

これを使って...

$(document).ready(function(){

        $(".toTop").hide();

        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 200) {
                    $('.toTop').fadeIn();
                } else {
                    $('.toTop').fadeOut();
                }
            });        
        });        
    });

var easing, e, pos;
    $(function(){
      $(".toTop").on("click", function(){
        pos= $(window).scrollTop();
        $("body").css({
          "margin-top": -pos+"px",
          "overflow-y": "scroll", 
        });
        $(window).scrollTop(0);
        $("body").css("transition", "all 1s ease");
        $("body").css("margin-top", "0");
        $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
          $("body").css("transition", "none");
        });
      });
    });

そして、このDEMO

于 2013-06-01T13:20:30.340 に答える
0

最初のポイントは、多くの.ready()イベント ハンドラーに慣れているということです。すべての冗長性を取り除きます:

$(document).ready(function(){

  $(".toTop").hide();

  $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
           $('.toTop').fadeIn();
      } else {
           $('.toTop').fadeOut();
      }
  });        

  var easing, e, pos;
  $(".toTop").on("click", function(){
    pos = $(window).scrollTop();
    $("body").css({
      "margin-top": -pos+"px",
      "overflow-y": "scroll", 
    });
    $(window).scrollTop(0);

    $("body").css("transition", "all 1s ease");
    $("body").css("margin-top", "0");
    $("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
      $("body").css("transition", "none");
    });
  });

});
于 2013-06-01T13:06:57.690 に答える