【ズルいWeb制作】2nd:100万円稼ぐまでの挑戦38【スムーススクロールとフローティングアイテム】

こんにちは、タビんちゅです。

目標はWeb制作で100万円稼ぐ!!

東京フリーランスが無料で提供している30DAYSトライアル(デイトラ)1stを完了し、2ndで学んだことを忘れないうちに書いていきます。

これからデイトラをはじめる人の参考にもなるかもです。

この記事を書いたタビんちゅは、

  • Web制作で稼いで2020年5月のセブ🇵🇭友達の結婚式に絶対行く
  • セブIT留学で大失敗
  • 海外フリーランスを諦められない
  •  #30DAYSトライアル で再挑戦プログラミング中
  • Web制作、フリーランス関連を学んで即発信中

あと記事はサクッと書いているので、誤字脱字があったらすみません。

『2nd:DAY22』を学習中

【今日やること】スムーススクロールとフローティングアイテムを作る

クリックした時に「ぐいーん」と移動するボタンを作っていく。さらにリッチなサイトへ

解説サイトを見て、理解して、コードをいじる

WordPressだと「$」が競合するので「$」の部分を「jQuery」に変更しないときけないらしい。

ナビバー分の100px、スムーススクロールを着地点を100px上にずらさなくてはいけないので、下記の参考サイトのコードを利用しました

スマホ版はこんな感じ

参考サイト:

スクロールの途中で出現するフローティングボタンのJavaScript

jQuery導入サイト:https://creive.me/archives/19581/

スムーススクロール(着地点を100px上にずらす):https://www.webantena.net/javascriptjquery/smooth-scroll-target-offset-top-plus-100/

https://twitter.com/tabin_chu23/status/1223595702300872704

ひと口メモ

Web上にある解説サイトを見て、理解して、コードをいじる。これでスムーススクロールとフローティングアイテムは完成。

というわけで、今回はここまでです。『プログラミングは継続がいちばん大事。』ではでは。

人気No.1記事