トップに戻ると次と前のボタンJavascript

Question

私は知っているトップトップボタンに関連するJSの小さな部分がありますが、それは私の能力を超えてちょっとです。 JSをうまく使っている人にとっては、これは2分の仕事です。 トップとボトムのボタンと次と前のボタンもあるという結果になるコードです。

私が短縮必要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() {
を削除することができます
• 要素をカンマで区切ることができます。 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>