WEB制作

スムーズスクロールが動かない！？そんな時に試してほしいコード。

ページ内リンクをするするスクロールさせる

ページ内リンクをするするとスクロールさせるtipsです。他のブログでもjqueryのコードが紹介されていますが、うまく動かないケースがあるようです。そんなときはこのやり方をお試しください。

 

<head>〜<head>内に以下を記述

<head>〜<head>内に下記の2つのコードを記述してください。

①jqueryの読み込み

まずはjqueryを読み込みます。すでに読み込んである場合はこの手順はスキップしてください。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

 

②スクロールの動作を記述

スムーズスクロールの動きを指定します。var speed = 400; の数値を変更することで、スクロール速度が変わります。

<!-- スムーズスクロール -->
<script>
$(function(){
$('a[href^="#"]').click(function() {
var speed = 400; // スクロールスピード(ミリ秒)
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
<!-- スムーズスクロール -->

 

<body>〜<body>に以下を記述

HTML部分はこのように記述します。簡単ですね。

<!-- ページ内ナビ -->
<a href="#nav1">ナビ1へジャンプ</a>
<a href="#nav2">ナビ2へジャンプ</a>

<!-- ページ内ジャンプ先 -->
<div id="nav1">ここにナビ1の内容を記述</div>
<div id="nav2">ここにナビ2の内容を記述</div>

jqueryのスムーススクロール(するするスクロール)をやってみたけど動かなかった、という方はぜひお試しください。では！

  • この記事を書いた人

おるまーで

WEB屋

-WEB制作
-

Copyright© おるまーで , 2024 All Rights Reserved.