我有一小段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

回答

相關問題