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

我需要缩短的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>

来源

2017-07-02 lee03

你只需要使用环绕所有代码一个'的jQuery（文档）.ready'。你也只需要声明一次'offset'和'duration'变量。 – WizardCoder

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

您可以删除多个jQuery(document).ready(function() {
你可以用逗号分隔这些元素，而不是tha n个写每次（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>

来源

2017-07-02 11:09:05

感谢米兰它的完美运作。 – lee03

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

的HTML

回答

相关问题