Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e5d8136

Browse files
add task26 and update the answer of task 25
1 parent 2e2e699 commit e5d8136

File tree

5 files changed

+332
-0
lines changed

5 files changed

+332
-0
lines changed

‎25 - Back To Top/index-FINISHED.html

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="stylesheet" href="style.css">
9+
<title>25 - Back To Top</title>
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Back to top</h1>
15+
<p>Scroll down the page</p>
16+
</header>
17+
<main class="cd-container">
18+
<p>
19+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos
20+
eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.
21+
</p>
22+
23+
<p>
24+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio
25+
quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam
26+
quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt
27+
deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam
28+
obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit
29+
sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae
30+
pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo
31+
repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi
32+
officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores!
33+
Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam
34+
officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque
35+
sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste.
36+
Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur
37+
harum asperiores culpa nostrum omnis.
38+
</p>
39+
40+
<p>
41+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio
42+
quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam
43+
quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt
44+
deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam
45+
obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit
46+
sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae
47+
pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo
48+
repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi
49+
officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores!
50+
Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam
51+
officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque
52+
sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste.
53+
Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur
54+
harum asperiores culpa nostrum omnis.
55+
</p>
56+
57+
<p>
58+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, quos, voluptate, sunt, in suscipit quibusdam quis dignissimos
59+
eligendi repellendus ipsam exercitationem adipisci nostrum fugit accusamus quae cum nisi accusantium eaque.
60+
</p>
61+
62+
<p>
63+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio
64+
quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam
65+
quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt
66+
deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam
67+
obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit
68+
sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae
69+
pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo
70+
repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi
71+
officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores!
72+
Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam
73+
officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque
74+
sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste.
75+
Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur
76+
harum asperiores culpa nostrum omnis.
77+
</p>
78+
79+
<p>
80+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dolore, impedit eveniet necessitatibus voluptate distinctio
81+
quam repellendus voluptates voluptatum inventore rem sapiente minus esse saepe iste harum architecto numquam
82+
quis vero dignissimos beatae est id libero adipisci enim odio natus commodi explicabo modi similique nesciunt
83+
deserunt vel consectetur velit omnis quaerat corrupti. Cumque, perspiciatis, culpa, reprehenderit laboriosam
84+
obcaecati deleniti soluta tempora ipsum ipsam iure temporibus dolore modi quidem cum doloribus ex vel suscipit
85+
sapiente ut esse optio voluptates molestias natus nostrum illo nihil quisquam facilis hic atque voluptas quae
86+
pariatur placeat officia doloremque quia ea recusandae rem iste asperiores iusto debitis quod incidunt id nemo
87+
repellendus itaque. Iure, vel, expedita quam repellendus aliquam fugit autem obcaecati libero reiciendis excepturi
88+
officia voluptate molestiae quis itaque consequatur nulla ea sunt facilis cupiditate tempora sequi nam in asperiores!
89+
Sunt, maxime at id eaque debitis quasi a possimus eveniet eum velit tempore quidem voluptates expedita quibusdam
90+
officiis. Ipsum, quaerat, vero, adipisci enim autem inventore eum maiores consectetur culpa molestiae cumque
91+
sed qui dolorem. Placeat, quae deleniti molestiae minima cupiditate quaerat sit est perspiciatis error iste.
92+
Ratione, minus, commodi, magni laborum doloribus libero ullam quos tenetur quis molestias ipsam consequuntur
93+
harum asperiores culpa nostrum omnis.
94+
</p>
95+
</main>
96+
<button id="backToTop">Top</button>
97+
98+
<script>
99+
// When the user scrolls down 20px from the top of the document, show the button
100+
window.onscroll = function () {
101+
scrollFunction()
102+
};
103+
104+
function scrollFunction() {
105+
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
106+
document.getElementById("backToTop").style.display = "block";
107+
} else {
108+
document.getElementById("backToTop").style.display = "none";
109+
}
110+
}
111+
112+
// When the user clicks on the button, scroll to the top of the document
113+
function backToTop() {
114+
document.body.scrollTop = 0;
115+
document.documentElement.scrollTop = 0;
116+
}
117+
118+
window.onload = function () {
119+
const backToTopButton = document.querySelector('#backToTop');
120+
backToTopButton.addEventListener('click', backToTop);
121+
};
122+
</script>
123+
</body>
124+
125+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /