jQuery

【jQuery】簡単なスクロールプラグインSmoothScroll

July 17, 2017
SmoothScroll

SmoothScrollは簡単なスクロールjQueryプラグイン。

Setup

jQueryとjQueryUIが必要

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
$(document).ready(function () {
});

次のコードを追加

$("#idOfClickableLinkHere").on('click', function () {
      scrollToAnchor('idOfElementToScrollToHere');
  });

​​3つのリンク

$(document).ready(function () {
  $("#scroll1Link").on('click', function () {
      scrollToAnchor('scroll1');
  });
  $("#scroll2Link").on('click', function () {
      scrollToAnchor('scroll2');
  });
  
  $("#scroll3Link").on('click', function () {
      scrollToAnchor('scroll3');
  });
});

スクロールスピードなど

.animate(
    {
        scrollTop: offset
    },
    {
        /*
        duration can be set to 
        'fast', 'slow', or any integer
        (in milliseconds)
        jQuery's default is 400.
        'fast' = 200, 'slow' = 600.
        I like it relatively slow.
        */
        duration: 1500,
        /* 
        'easeOutBack' provides the bouncy effect
        for other effects, please refer to README.md
        */
        easing: 'easeOutBack'
    }
);