html

Question

我有一小段关于回到顶部按钮的JS，我知道它可以缩短，但它只是有点超出我的能力。对于一个擅长JS的人来说，这是一份两分钟的工作。它的代码很酷，导致返回顶部和底部按钮以及下一个和上一个按钮。

我需要缩短的js是：

            jQuery(document).ready(function() {
        var offset = 300;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.sidebtn-top').fadeIn(duration);
            } else {
                jQuery('.sidebtn-top').fadeOut(duration);
            }
        });

    jQuery('.sidebtn-top').click(function(event) {
            event.preventDefault();
            jQuery('html, body').animate({scrollTop: 0}, 1000);
            return false;
        })
    });

    jQuery(document).ready(function() {
        var offset = 300;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.sidebtn-bttm').fadeIn(duration);
            } else {
                jQuery('.sidebtn-bttm').fadeOut(duration);
            }
     });

    jQuery('.sidebtn-bttm').click(function(){
           jQuery('html,body').animate({scrollTop: $(document).height() }, 1000);
          return false;
       });
    });



    jQuery(document).ready(function() {
        var offset = 300;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.sidebtn-rt').fadeIn(duration);
            } else {
                jQuery('.sidebtn-rt').fadeOut(duration);
            }
        });
    });

    jQuery(document).ready(function() {
        var offset = 300;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery('.sidebtn-lft').fadeIn(duration);
            } else {
                jQuery('.sidebtn-lft').fadeOut(duration);
            }
        });
    });

html

    <a class="sidebtn-rt" href="http://-url-"><div class="arrow-right"></div></a>

    <a class="sidebtn-lft" href=" http://-url-"><div class="arrow-left"></div></a>

    <a class="sidebtn-top" href="#"><div class="arrow-up"></div></a>

    <a class="sidebtn-bttm" href="#"><div class="arrow-down"></div></a>

Answer 1

以下是您可以尝试的压缩代码：

您可以删除多个jQuery(document).ready(function() {
你可以用逗号来标记元素，而不是每次都写（jQuery('.sidebtn-top, .sidebtn-btt, .sidebtn-rt, .sidebtn-lft')）

jQuery(document).ready(function() {
  var offset = 300;
  var duration = 500;
  jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
      jQuery('.sidebtn-top, .sidebtn-btt, .sidebtn-rt, .sidebtn-lft').fadeIn(duration);
    } else {
      jQuery('.sidebtn-top, .sidebtn-btt, .sidebtn-rt, .sidebtn-lft').fadeOut(duration);
    }
  });

  jQuery('.sidebtn-top, .sidebtn-btt').click(function(event) {
    event.preventDefault();
    var scrollLoc = 0;
    if ($(this).hasClass('sidebtn-btt'))
      var scrollLoc = $(document).height();

    jQuery('html, body').animate({
      scrollTop: scrollLoc
    }, 1000);
    return false;
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="sidebtn-rt" href="http://-url-">
  <div class="arrow-right">right</div>
</a>

<a class="sidebtn-lft" href=" http://-url-">
  <div class="arrow-left">left</div>
</a>

<a class="sidebtn-top" href="#">
  <div class="arrow-up">top</div>
</a>

<a class="sidebtn-bttm" href="#">
  <div class="arrow-down">down</div>
</a>

返回页首以及下一个和上一个按钮Javascript

html

1 个答案: