jQueryで指定位置までスムーズにページスクロールする機能を実装してみよう。

どうも、トッドです。

いきなりですが、こんな体験をしたことはありませんか?

とても長〜い記事を読んでいるときに途中で集中力が切れて、ダラ〜〜〜っとスクロー ルしてしまい、アレ?どこまで読んだっけ?……

そんな気持ちにさせたくない、そこのあなた!!「Topページに戻る」ボタンでお馴染みのスムーズスクロール機能を少し触ってあげると、より機能的なモノになりますよ。

ボタンを押したらページの先頭まで自動でスクロールしながら戻るアレです。

あの仕組みをそのままに。ボタンと、その結び目の数を増やしてあげるとより詳細 な振り分けが可能になるページスクロール機能を実装する事ができます。

今回は任意のところへピンポイントにページスクロールする(ヤツ)をjQueryで 実装する方法の紹介!!


スムーズってNANI?

HTMLにて、link:href属性にID指定で紐付けされている任意の要素位置までスキップ する要領で、Topまで戻る機能を実装しているページがあります。

目的は同じなんだけど、あえてスクロールされている場面を見せたい!何故ならば、 それが「リッチ」に見えてしまうから。

This is Smooth.

スムーズスクロールのcodeと解説!!

完成物のコード&デモはこんな感じになっています。↓

See the Pen Smooth Scroll by Todd (@threefrog) on CodePen.</span >

今回、紹介しているコードはheaderタグで囲った中にメニューバーのようなものを設置。その上でそれぞれの項目(今回は見出し)に対してID指定による要素との紐付けを行い、それぞれ該当するリンクがクリックされた時にhasclass()による条件分岐で振り分けています。

gapはメニューバーの高さ分を確保する為のものです。

スクロール時のアニメーションはすごくシンプルなものなので、そこは変えてみると良い遊びになるかも、

後は、今回メニューバーのような仕様で構成していますが自分でブログ運営をやっている方であれば、目次の場面で使ってみたりすると良い感じになるのではと思います。

コメントを残す

メールアドレスが公開されることはありません。