CSSのみでクリック&自動スクロールを実装する方法

CSSのみでクリック&スクロール

webサイトでクリック&スクロールはとてもよく使う技なので、使い方をご存知ない方はぜひこちらを参考にして頂ければと思います。

クリック・スクロールは、最もよく使われるのはJavaScriptで作成する方法です。

以前こちらのブログでも紹介しています。

 

CSSよりは少し複雑にはなるのですが、ブラウザ関係なく安定してクリックスクロールを実装するという場合は、こちらの方法をお勧めいたします。

 

今回ご紹介するCSSでのスクロールは、JavaScriptよりはもっとシンプルな方法で、簡単に実装できます。

JavaScriptはよくわからない、という方にはこちらの方法でまずは実装してみてください。ただユーザーの利用するブラウザによってはCSSが対応していないという場合もあるので、その点はご注意ください。

 

 

CSSでのスムーススクロールはとてもシンプル

CSSでのスムーススクロールの書き方はとてもシンプルです。

 

まずはクリック後に移動したい場所(例えばdiv要素)にidで名前を付与します。

<div id="sample">
  <p>text</p>
</div>

 

こう言ったdiv要素にトップのメニューなどからクリックした時にスクロールで移動させたい、といったときに<a>タグのhref属性にこちらのidを付与するだけで完了です。

例えば、 

<nav>
  <ul>
    <li><a href="#sample">menu1</a></li>
    <li>menu2</li>
  </ul>
</nav>

こういったmenu1,menu2というトップメニューがあるとして、menu1に<a>タグで”sample”という名前のIDに指定しています。

なんと、、これで完了です。

 

この状態で、トップメニューのmenu1をクリックすると、id”sample”のdiv要素まで自動でスクロールがされる様になります。 

 

javascriptでクリック&スクールはもっと多様なことができる

上でCSSでのスムーススクロールの書き方をご紹介しました。

スムーススクロールを実装したい、という方の中にはもっとスピードをゆっくりしたい、逆にもっと早く移動させたい、という方もいると思います。

そう言った細かな動きを実現させたい、という場合はCSSでは難しいのでjavaScriptで書くことになります。 

 

javaScriptでは上で書いたことだけでなく、、クリックから時間を置いてアクションを発動させたり、スクロールの指定位置まで自由に指定することなども可能です。

javascriptを使えばアニメーションなども実装することができるので、こちらも興味がある人はぜひ見てみて下さい。

sasurai

旅と写真を愛する人。 web制作の仕事をしています。 写真も撮ります。お仕事のお問い合わせはお気軽に。

シェアする

Translate »