テクノロジー

はじめての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
30.10 ALIS
Eye catch
クリプト

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

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

ALISのシステム概観

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

「ハッシュ」とは何なのか、必ず理解させます

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

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

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

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

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

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

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

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

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

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

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

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

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

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

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

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

Like token Tip token
59.32 ALIS