4N-WORK~TNTのボヤキ~

Time Limit 2044/12/22 3:46:57

【HTML & CSS & jQuery】ふわっと出てくる「上へ戻るボタン」の実装

otamunote.com

上記のブログを参考にサンプルデータを作成したので、公開します。

https://drive.google.com/file/d/1lvOCTtqcUX1XRITJmFoxnoF1CRgDgpQE/view?usp=sharing

 

ファイルの中身はこんな感じの構成になっています。

f:id:supera4d:20210623151800p:plain

Htamunote様のブログでは、HTMLでJavaScriptを読み込む方法等が記載されておらず、Web初心者の私では、上手く実装するのに苦戦したので、以下のTechAcademyのサイトで、JavaScriptを読み込む方法も参考に勉強しました。

techacademy.jp

 

f:id:supera4d:20210623153221j:plain

上記のような感じでJavaScriptを読み込ませます。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link rel="stylesheet" href="stylesheet.css">

<title></title>

</head>

<body>

<p>1</p>

<p>1</p>

<p>1</p>

<p id="page-top"><a href="#">上へ戻る</a></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="script.js"></script>

</body>

</html> 

 HTMLはこんな感じです。

 

備忘録として残しておきます。

 

以上。

お大事に。