ふかふか交易所 - ネットコンテンツから日々のお役立ち情報まで

ふかふか交易所 | ネットコンテンツや日々のお役立ち情報まで
RSSを購読する
follow us in feedly
トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ下部へ

HP・ブログカテゴリ 新着記事

HP・ブログカテゴリ 新着記事

サイト内検索

総合ランキング

ホーム > HP・ブログカテゴリー No.21 ~ No.30 > 記事No.24

ページ内リンクをスムーズスクロールで滑らかに移動させる方法(jQuery)

← 前の記事

次の記事 →

smooth_scroll

ページ内のリンクをクリックした際に目的箇所まで滑らかに移動するスムーズスクロールを簡単に適用する方法について紹介します!

スムーズスクロールを適用すると↓のリンクのように目的地まで滑らかにスクロール移動することができます。



スムーズスクロールを適用する事で遷移時の見てくれも良くなりますし、スクロールして移動するので移動先の場所が分かり易くなるという利点があります。

jQuery行の追加

スムーズスクロールを適用したいページの<head></head>内に以下の行を追加してください。


・1行目はjQuery読み出し行です

・7行目のvar speedで移動時の速度を指定します

・11行目でページ内に含まれる"#"の付くリンク全てにスムーズスクロールを適用しています


これだけでスムーズスクロールの適用は完了です!ためしにページ内リンクをクリックし、滑らかに遷移するかを確認してみてください。

この記事を読んだ人はコチラも見ています

HP・ブログ関連の人気記事

関連記事はこちら


  ■ 一言コメントをどうぞ!(100字まで)


総合ランキング

ご意見や質問などは気軽にメッセージフォームへ!


hp_blog_top
HP・ブログ制作ノウハウまとめ
movie_top
動画制作ノウハウまとめ
money_top
お金・クレカ記事まとめ
minecraft_top
マインクラフト記事まとめ

当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ上部へ