ページを開いた時にスムーズスクロールする方法

ページを開いた後にjqueryでURLの「id」パラメーターを読込して、animateでそのidのブロックまでスクロールするアニメーションです。

まずはデモをご覧ください。

HTML

<div id="demo1">スクロール位置A</div>
<div id="demo2">スクロール位置B</div>

CSS

#demo1{
	width:100%;
	height:1000px;
	background-color:red;
	color:white;
	display: flex;
	justify-content: center;
	align-items: center;
}
#demo2{
	width:100%;
	height:1000px;
	background-color:blue;
	color:white;
	display: flex;
	justify-content: center;
	align-items: center;
}

jQuery

(function($){
  // URLのアンカー(#以降の部分)を取得
  var urlHash = location.search;
  var speed = 500;

  setTimeout(function(){
    // URLにアンカーが存在する場合
    if(urlHash){
      var target_id = urlHash.replace('?id=','');
      var target = $('#'+target_id);
      var position = target.offset().top;
      $("html, body").animate({scrollTop:position}, speed, "swing");
    }
  },500);
})(jQuery);
Sidebar