WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

スクロールアニメーション

ボタンを押したらアニメーションでページトップに戻る

$('.totop').on('click',function(){
 $('body,html').animate({
   scrollTop: 0
 },1000,'easeOutCubic');
});

クラスtotopを押したら
body,htmlがanimeteで
scrollTop: 0に移動
1000ミリ秒の間に動作する

リンク先のハッシュと同じid名の場所にアニメーションで移動

$('ul li a[href^=#]').click(function() {
  var speed = 1000;
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'easeOutCubic');
  return false;
});

リンクを押して別ページに移動した時に該当の場所に移動

<ul>
  <li><a href="#about">ABOUT</a></li>
  <li><a href="#profile">PROFILE</a></li>
  <li><a href="#works">WORKS</a></li>
</ul>
var hash = location.hash;
if(hash == "#about") {
  var _target = $('#about').offset().top;
  $("html, body").scrollTop(_target);
}  else if(hash == "#profile") {
  var _target = $('#profile').offset().top;
  $("html, body").scrollTop(_target);
} else if(hash == "#works") {
  var _target = $('#works').offset().top;
  $("html, body").scrollTop(_target);
}

location.hashで現在のURLのハッシュを取得