テクノロジー

はじめてのJavaScript 〜スムーズスクロール〜

けろ🐸UGOK's icon'
  • けろ🐸UGOK
  • 2020/06/19 04:22
Content image

けろ🐸です。

サークルのチーム制作サイトでページ内リンクのスムーズスクロールをさせたのでその備忘録を書きたいと思います。

JavaScriptはProgateや本で少ししか触ってないので、少し見にくいコードになっているかもしれません。

 

今回のスムーズスクロール

ナビ内のリンクをクリック(タップ)するとウインドウ をリンク先までスクロールさせる

・Safariでは動かない(また後日Safariで動く物もまとめようと思います。)

jQuery非依存の完全素のJavaScript

 

サンプルコード

<nav>~</nav>内の<a>タグをクリックするとその要素までスクロールするコードです。

 

・11行目〜14行目

11行目-let navOne = document.getElementById('one');

クリックする要素を取得

12行目-let one = document.getElementById('one');

クリック先の要素を取得

13行目-let oneY = one.getBoundingClientRect().top;

クリック先要素の最上部位置取得

14行目-headScroll(navOne,oneY);

headScroll関数にクリックする要素とクリック先要素の最上部位置を引数として渡す

 

・2行目:elem.addEventListener('click', (e) => {...}

elemがクリックされたら{}内の処理開始

 

・3行目:e.preventDefault();

要素がクリックされた際のイベントを消す

 

・5行目〜6行目

5行目-top: elemY,

画面上部をelemYまでウインドウをスクロールさせる

6行目-behavior: 'smooth'

スクロールさせる際の動きを滑らかにする

(ここがSafariには対応していないので、Safariではスムーズな動きにならない模様です。対応している主なブラウザはChrome(Android含む)とFirefoxのみ)

 

サンプルサイト

 

 

以上けろ🐸でした

 

 

 

 

 

 

 

Supporter profile iconSupporter profile icon
Article tip 2人がサポートしています
獲得ALIS: Article like 6.31 ALIS Article tip 2.10 ALIS
けろ🐸UGOK's icon'
  • けろ🐸UGOK
  • @kero-ugok
UGOKのメンバーです

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
120.79 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
クリプト

スーパーコンピュータ「京」でマイニングしたら

Like token Tip token
1.06k ALIS
Eye catch
他カテゴリ

機械学習を体験してみよう!(難易度低)

Like token Tip token
124.82 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
クリプト

ブロックチェーンの51%攻撃ってなに

Like token Tip token
0.00 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS