WEB部門での実務経験

実務経験17日目、長いLPではスムーススクロールを付けた方がいい

実務経験17日目、長いLPではスムーススクロールを付けた方がいい

実務経験で長いLPを作る時にスムーススクロールを付けた方がいい

今日もひたすらコーディングをしてとりあえずスマホ画面ができたので社員に問題ないかを見てもらったら↓みたいな長いLPの場合はずっとスクロールするのが大変です。(スマホ画面しか作っていません)

https://hayatakyohei.github.io/ebm-es/

だから見たい所に飛んで貰うページ内リンク(スムーススクロール)を付けないとサイト閲覧者が逃げる可能性がある事を知りました。

具体的に言うとこれから長い商品説明だとページを訪れた人にとって興味がない商品もあるはずです。

そういう人が見たい商品だけ見る事ができるようにしますが飛び先のコードを↓にします。

飛ばしたい先のid属性を決めますが「list1」としたとします

 

そして飛び元のコードを↓にしますがaタグの属性を飛び元に合わせます。

飛び先のid属性が「list1」なので飛び元のhrefの中身を#list1にします

 

そしてjQueryを↓にします。

ブログだと目次から見たい見出しまで飛ぶイメージです、↓で実装しています。

https://kyohayata.github.io/ebm-es/

簡単に実装できるのとLPでは必須になるのでこれから実務経験を積みたい人は覚えておいた方がいいです。

jQueryの技術力を上げる為にまだ使った事がないイベントを混ぜたいです。

やり過ぎると会社の人から「そんなに入れなくていいです」と言われるので気をつけないといけないですが 笑