More than 5 years have passed since last update.

jquery smooth scroll

note

Posted at 2018-07-09

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Document</title>
<!--<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>-->
<!--<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(function($) {
  $('a[href*="#"]').click(function(e) {
    var speed = 300,
        easing = 'swing',
        anchorTop = '#' + $('body').attr('id'),
        noscrollClass = 'is-noscroll',
        noscroll = $(this).hasClass(noscrollClass) || $(this).parents('.' + noscrollClass).length,
        $scrollElm = $(document.scrollingElement || document.documentElement),
        url = location.href.split('#')[0],
        href = this.href.split("#")[0],
        target = this.hash;
    if(!noscroll && url == href && target && !target.match(/\//) && $(target).length) {
      var targetOffset = $(target).offset().top,
          historyHash = target == anchorTop ? url : href + target;
      $scrollElm.animate({scrollTop: targetOffset}, speed, easing);
      window.history.pushState(null, null, historyHash);
      e.preventDefault();
    }
  });
});
</script>
</head>
<body id="pagetop">

<p><a href="./#/test">テスト</a></p>
<p><a href="./?mode=0#test" class="is-noscroll">テスト</a></p>

<p><a href="#test">テスト</a></p>
<p class="is-noscroll"><a href="./#test">テスト</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
ho
ge
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="test">test</div>
<br>
<br>
<a href="#pagetop">トップ</a>
</body>
</html>

以上、ありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up