ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

いろいろ調べたので、メモ。ページを表示したら一定時間後に目的の位置までスクロールするjQueryを使ったJSです。

以下のJSは、1秒後にid=”main”の箇所までスクロールします。

<script type="text/javascript">
$(function(){
var targetOffset = $('#main').offset().top;
$('html,body').delay(1000).animate({scrollTop: targetOffset}, "slow");
});
</script>

id=”main”の位置を取得して、その位置までスクロールするというようになっています。.delay(1000)を削除するとすぐ動きます。

突然勝手に移動するので、ユーザーがビックリするかもしれませんが、うまく使えば面白い演出ができるかもしれません。

コメント

タイトルとURLをコピーしました