CSS 和 JavaScript 按段落滚动

yycvip

现代网页通常分为多个内容部分。这个小工具在页面底部添加一个按钮，用户可以通过点击它来滚动到下一个部分。它结合了 CSS ID 和 jQuery 来实现导航功能。



HTML

1. <section id="section01" class="demo">
   
2.   <h1>Scroll Down Button #1</h1>
   
3.   <a href="#section02"><span></span>Scroll</a>
   
4. </section>
   
5. <section id="section02" class="demo">
   
6.   <h1>Scroll Down Button #2</h1>
   
7.   <a href="#section03"><span></span>Scroll</a>
   
8. </section>
   
9. <section id="section03" class="demo">
   
10.   <h1>Scroll Down Button #3</h1>
    
11.   <a href="#section04"><span></span>Scroll</a>
    
12. </section>
    
13. <section id="section04" class="demo">
    
14.   <h1>Scroll Down Button #4</h1>
    
15.   <a href="#section05"><span></span>Scroll</a>
    
16. </section>
    
17. <section id="section05" class="demo">
    
18.   <h1>Scroll Down Button #5</h1>
    
19.   <a href="#section06"><span></span>Scroll</a>
    
20. </section>
    
21. <section id="section06" class="demo">
    
22.   <h1>Scroll Down Button #6</h1>
    
23.   <a href="#section07"><span></span>Scroll</a>
    
24. </section>
    
25. <section id="section07" class="demo">
    
26.   <h1>Scroll Down Button #7</h1>
    
27.   <a href="#section08"><span></span><span></span><span></span>Scroll</a>
    
28. </section>
    
29. <section id="section08" class="demo">
    
30.   <h1>Scroll Down Button #8</h1>
    
31.   <a href="#section09"><span></span>Scroll</a>
    
32. </section>
    
33. <section id="section09" class="demo">
    
34.   <h1>Scroll Down Button #9</h1>
    
35.   <a href="#section10"><span></span>Scroll</a>
    
36. </section>
    
37. <section id="section10" class="demo">
    
38.   <h1>Scroll Down Button #10</h1>
    
39.   <a href="#thanks"><span></span>Scroll</a>
    
40. </section>
    
41. <section id="thanks">
    
42.   <div>
    
43.     <h2>Thanks!</h2>
    
44.     <p><a href="https://www.nxworld.net/css-scroll-down-button.html" target="_parent">&lt; Back To Article</a></p>
    
45.   </div>
    
46. </section>

复制代码

CSS

1. @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
   
2. * {
   
3.   margin: 0;
   
4.   padding: 0;
   
5. }
   
6. html, body {
   
7.   height: 100%;
   
8. }
   
9. section {
   
10.   position: relative;
    
11.   width: 100%;
    
12.   height: 100%;
    
13. }
    
14. section::after {
    
15.   position: absolute;
    
16.   bottom: 0;
    
17.   left: 0;
    
18.   content: '';
    
19.   width: 100%;
    
20.   height: 80%;
    
21.   background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
    
22.   background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
    
23. }
    
24. section h1 {
    
25.   position: absolute;
    
26.   top: 50%;
    
27.   left: 50%;
    
28.   z-index: 2;
    
29.   -webkit-transform: translate(-50%, -50%);
    
30.   transform: translate(-50%, -50%);
    
31.   color: #fff;
    
32.   font : normal 300 64px/1 'Josefin Sans', sans-serif;
    
33.   text-align: center;
    
34.   white-space: nowrap;
    
35. }
    
36. 
    
37. #section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
    
38. #section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
    
39. #section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
    
40. #section04 { background: url(https://picsum.photos/1200/800?image=506) center center / cover no-repeat;}
    
41. #section05 { background: url(https://picsum.photos/1200/800?image=1037) center center / cover no-repeat;}
    
42. #section06 { background: url(https://picsum.photos/1200/800?image=901) center center / cover no-repeat;}
    
43. #section07 { background: url(https://picsum.photos/1200/800?image=675) center center / cover no-repeat;}
    
44. #section08 { background: url(https://picsum.photos/1200/800?image=1050) center center / cover no-repeat;}
    
45. #section09 { background: url(https://picsum.photos/1200/800?image=902) center center / cover no-repeat;}
    
46. #section10 { background: url(https://picsum.photos/1200/800?image=516) center center / cover no-repeat;}
    
47. 
    
48. #thanks {
    
49.   background-color: #fff;
    
50. }
    
51. #thanks::after {
    
52.   content: none;
    
53. }
    
54. #thanks div {
    
55.   position: absolute;
    
56.   top: 50%;
    
57.   left: 50%;
    
58.   z-index: 2;
    
59.   -webkit-transform: translate(-50%, -50%);
    
60.   transform: translate(-50%, -50%);
    
61.   text-align: center;
    
62. }
    
63. #thanks h2 {
    
64.   margin-bottom: 60px;
    
65.   color: #333;
    
66.   font : normal 300 64px/1 'Josefin Sans', sans-serif;
    
67.   text-align: center;
    
68.   white-space: nowrap;
    
69. }
    
70. #thanks p {
    
71.   color: #333;
    
72.   font : normal 400 20px/1 'Josefin Sans', sans-serif;
    
73. }
    
74. #thanks p a {
    
75.   color: #333;
    
76.   text-decoration: none;
    
77.   transition: color .3s;
    
78. }
    
79. #thanks p a:hover {
    
80.   color: #888;
    
81. }
    
82. .demo a {
    
83.   position: absolute;
    
84.   bottom: 20px;
    
85.   left: 50%;
    
86.   z-index: 2;
    
87.   display: inline-block;
    
88.   -webkit-transform: translate(0, -50%);
    
89.   transform: translate(0, -50%);
    
90.   color: #fff;
    
91.   font : normal 400 20px/1 'Josefin Sans', sans-serif;
    
92.   letter-spacing: .1em;
    
93.   text-decoration: none;
    
94.   transition: opacity .3s;
    
95. }
    
96. .demo a:hover {
    
97.   opacity: .5;
    
98. }
    
99. 
    
100. 
     
101. 
     
102. #section01 a {
     
103.   padding-top: 60px;
     
104. }
     
105. #section01 a span {
     
106.   position: absolute;
     
107.   top: 0;
     
108.   left: 50%;
     
109.   width: 24px;
     
110.   height: 24px;
     
111.   margin-left: -12px;
     
112.   border-left: 1px solid #fff;
     
113.   border-bottom: 1px solid #fff;
     
114.   -webkit-transform: rotate(-45deg);
     
115.   transform: rotate(-45deg);
     
116.   box-sizing: border-box;
     
117. }
     
118. 
     
119. 
     
120. 
     
121. #section02 a {
     
122.   padding-top: 60px;
     
123. }
     
124. #section02 a span {
     
125.   position: absolute;
     
126.   top: 0;
     
127.   left: 50%;
     
128.   width: 46px;
     
129.   height: 46px;
     
130.   margin-left: -23px;
     
131.   border: 1px solid #fff;
     
132.   border-radius: 100%;
     
133.   box-sizing: border-box;
     
134. }
     
135. #section02 a span::after {
     
136.   position: absolute;
     
137.   top: 50%;
     
138.   left: 50%;
     
139.   content: '';
     
140.   width: 16px;
     
141.   height: 16px;
     
142.   margin: -12px 0 0 -8px;
     
143.   border-left: 1px solid #fff;
     
144.   border-bottom: 1px solid #fff;
     
145.   -webkit-transform: rotate(-45deg);
     
146.   transform: rotate(-45deg);
     
147.   box-sizing: border-box;
     
148. }
     
149. 
     
150. 
     
151. 
     
152. #section03 a {
     
153.   padding-top: 60px;
     
154. }
     
155. #section03 a span {
     
156.   position: absolute;
     
157.   top: 0;
     
158.   left: 50%;
     
159.   width: 46px;
     
160.   height: 46px;
     
161.   margin-left: -23px;
     
162.   border: 1px solid #fff;
     
163.   border-radius: 100%;
     
164.   box-sizing: border-box;
     
165. }
     
166. #section03 a span::after {
     
167.   position: absolute;
     
168.   top: 50%;
     
169.   left: 50%;
     
170.   content: '';
     
171.   width: 16px;
     
172.   height: 16px;
     
173.   margin: -12px 0 0 -8px;
     
174.   border-left: 1px solid #fff;
     
175.   border-bottom: 1px solid #fff;
     
176.   -webkit-transform: rotate(-45deg);
     
177.   transform: rotate(-45deg);
     
178.   box-sizing: border-box;
     
179. }
     
180. #section03 a span::before {
     
181.   position: absolute;
     
182.   top: 0;
     
183.   left: 0;
     
184.   z-index: -1;
     
185.   content: '';
     
186.   width: 44px;
     
187.   height: 44px;
     
188.   box-shadow: 0 0 0 0 rgba(255,255,255,.1);
     
189.   border-radius: 100%;
     
190.   opacity: 0;
     
191.   -webkit-animation: sdb03 3s infinite;
     
192.   animation: sdb03 3s infinite;
     
193.   box-sizing: border-box;
     
194. }
     
195. @-webkit-keyframes sdb03 {
     
196.   0% {
     
197.     opacity: 0;
     
198.   }
     
199.   30% {
     
200.     opacity: 1;
     
201.   }
     
202.   60% {
     
203.     box-shadow: 0 0 0 60px rgba(255,255,255,.1);
     
204.     opacity: 0;
     
205.   }
     
206.   100% {
     
207.     opacity: 0;
     
208.   }
     
209. }
     
210. @keyframes sdb03 {
     
211.   0% {
     
212.     opacity: 0;
     
213.   }
     
214.   30% {
     
215.     opacity: 1;
     
216.   }
     
217.   60% {
     
218.     box-shadow: 0 0 0 60px rgba(255,255,255,.1);
     
219.     opacity: 0;
     
220.   }
     
221.   100% {
     
222.     opacity: 0;
     
223.   }
     
224. }
     
225. 
     
226. 
     
227. 
     
228. #section04 a {
     
229.   padding-top: 60px;
     
230. }
     
231. #section04 a span {
     
232.   position: absolute;
     
233.   top: 0;
     
234.   left: 50%;
     
235.   width: 24px;
     
236.   height: 24px;
     
237.   margin-left: -12px;
     
238.   border-left: 1px solid #fff;
     
239.   border-bottom: 1px solid #fff;
     
240.   -webkit-transform: rotate(-45deg);
     
241.   transform: rotate(-45deg);
     
242.   -webkit-animation: sdb04 2s infinite;
     
243.   animation: sdb04 2s infinite;
     
244.   box-sizing: border-box;
     
245. }
     
246. @-webkit-keyframes sdb04 {
     
247.   0% {
     
248.     -webkit-transform: rotate(-45deg) translate(0, 0);
     
249.   }
     
250.   20% {
     
251.     -webkit-transform: rotate(-45deg) translate(-10px, 10px);
     
252.   }
     
253.   40% {
     
254.     -webkit-transform: rotate(-45deg) translate(0, 0);
     
255.   }
     
256. }
     
257. @keyframes sdb04 {
     
258.   0% {
     
259.     transform: rotate(-45deg) translate(0, 0);
     
260.   }
     
261.   20% {
     
262.     transform: rotate(-45deg) translate(-10px, 10px);
     
263.   }
     
264.   40% {
     
265.     transform: rotate(-45deg) translate(0, 0);
     
266.   }
     
267. }
     
268. 
     
269. 
     
270. 
     
271. #section05 a {
     
272.   padding-top: 70px;
     
273. }
     
274. #section05 a span {
     
275.   position: absolute;
     
276.   top: 0;
     
277.   left: 50%;
     
278.   width: 24px;
     
279.   height: 24px;
     
280.   margin-left: -12px;
     
281.   border-left: 1px solid #fff;
     
282.   border-bottom: 1px solid #fff;
     
283.   -webkit-transform: rotate(-45deg);
     
284.   transform: rotate(-45deg);
     
285.   -webkit-animation: sdb05 1.5s infinite;
     
286.   animation: sdb05 1.5s infinite;
     
287.   box-sizing: border-box;
     
288. }
     
289. @-webkit-keyframes sdb05 {
     
290.   0% {
     
291.     -webkit-transform: rotate(-45deg) translate(0, 0);
     
292.     opacity: 0;
     
293.   }
     
294.   50% {
     
295.     opacity: 1;
     
296.   }
     
297.   100% {
     
298.     -webkit-transform: rotate(-45deg) translate(-20px, 20px);
     
299.     opacity: 0;
     
300.   }
     
301. }
     
302. @keyframes sdb05 {
     
303.   0% {
     
304.     transform: rotate(-45deg) translate(0, 0);
     
305.     opacity: 0;
     
306.   }
     
307.   50% {
     
308.     opacity: 1;
     
309.   }
     
310.   100% {
     
311.     transform: rotate(-45deg) translate(-20px, 20px);
     
312.     opacity: 0;
     
313.   }
     
314. }
     
315. 
     
316. 
     
317. 
     
318. #section06 a {
     
319.   padding-top: 70px;
     
320. }
     
321. #section06 a span {
     
322.   position: absolute;
     
323.   top: 0;
     
324.   left: 50%;
     
325.   width: 24px;
     
326.   height: 24px;
     
327.   margin-left: -12px;
     
328.   border-left: 1px solid #fff;
     
329.   border-bottom: 1px solid #fff;
     
330.   -webkit-transform: rotateZ(-45deg);
     
331.   transform: rotateZ(-45deg);
     
332.   -webkit-animation: sdb06 1.5s infinite;
     
333.   animation: sdb06 1.5s infinite;
     
334.   box-sizing: border-box;
     
335. }
     
336. @-webkit-keyframes sdb06 {
     
337.   0% {
     
338.     -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
     
339.     opacity: 0;
     
340.   }
     
341.   50% {
     
342.     opacity: 1;
     
343.   }
     
344.   100% {
     
345.     -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
     
346.     opacity: 0;
     
347.   }
     
348. }
     
349. @keyframes sdb06 {
     
350.   0% {
     
351.     transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
     
352.     opacity: 0;
     
353.   }
     
354.   50% {
     
355.     opacity: 1;
     
356.   }
     
357.   100% {
     
358.     transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
     
359.     opacity: 0;
     
360.   }
     
361. }
     
362. 
     
363. 
     
364. 
     
365. #section07 a {
     
366.   padding-top: 80px;
     
367. }
     
368. #section07 a span {
     
369.   position: absolute;
     
370.   top: 0;
     
371.   left: 50%;
     
372.   width: 24px;
     
373.   height: 24px;
     
374.   margin-left: -12px;
     
375.   border-left: 1px solid #fff;
     
376.   border-bottom: 1px solid #fff;
     
377.   -webkit-transform: rotate(-45deg);
     
378.   transform: rotate(-45deg);
     
379.   -webkit-animation: sdb07 2s infinite;
     
380.   animation: sdb07 2s infinite;
     
381.   opacity: 0;
     
382.   box-sizing: border-box;
     
383. }
     
384. #section07 a span:nth-of-type(1) {
     
385.   -webkit-animation-delay: 0s;
     
386.   animation-delay: 0s;
     
387. }
     
388. #section07 a span:nth-of-type(2) {
     
389.   top: 16px;
     
390.   -webkit-animation-delay: .15s;
     
391.   animation-delay: .15s;
     
392. }
     
393. #section07 a span:nth-of-type(3) {
     
394.   top: 32px;
     
395.   -webkit-animation-delay: .3s;
     
396.   animation-delay: .3s;
     
397. }
     
398. @-webkit-keyframes sdb07 {
     
399.   0% {
     
400.     opacity: 0;
     
401.   }
     
402.   50% {
     
403.     opacity: 1;
     
404.   }
     
405.   100% {
     
406.     opacity: 0;
     
407.   }
     
408. }
     
409. @keyframes sdb07 {
     
410.   0% {
     
411.     opacity: 0;
     
412.   }
     
413.   50% {
     
414.     opacity: 1;
     
415.   }
     
416.   100% {
     
417.     opacity: 0;
     
418.   }
     
419. }
     
420. 
     
421. 
     
422. 
     
423. #section08 a {
     
424.   padding-top: 60px;
     
425. }
     
426. #section08 a span {
     
427.   position: absolute;
     
428.   top: 0;
     
429.   left: 50%;
     
430.   width: 30px;
     
431.   height: 50px;
     
432.   margin-left: -15px;
     
433.   border: 2px solid #fff;
     
434.   border-radius: 50px;
     
435.   box-sizing: border-box;
     
436. }
     
437. #section08 a span::before {
     
438.   position: absolute;
     
439.   top: 10px;
     
440.   left: 50%;
     
441.   content: '';
     
442.   width: 6px;
     
443.   height: 6px;
     
444.   margin-left: -3px;
     
445.   background-color: #fff;
     
446.   border-radius: 100%;
     
447.   box-sizing: border-box;
     
448. }
     
449. 
     
450. 
     
451. 
     
452. #section09 a {
     
453.   padding-top: 80px;
     
454. }
     
455. #section09 a span {
     
456.   position: absolute;
     
457.   top: 0;
     
458.   left: 50%;
     
459.   width: 30px;
     
460.   height: 50px;
     
461.   margin-left: -15px;
     
462.   border: 2px solid #fff;
     
463.   border-radius: 50px;
     
464.   box-sizing: border-box;
     
465. }
     
466. #section09 a span::before {
     
467.   position: absolute;
     
468.   top: 10px;
     
469.   left: 50%;
     
470.   content: '';
     
471.   width: 6px;
     
472.   height: 6px;
     
473.   margin-left: -3px;
     
474.   background-color: #fff;
     
475.   border-radius: 100%;
     
476.   box-sizing: border-box;
     
477. }
     
478. #section09 a span::after {
     
479.   position: absolute;
     
480.   bottom: -18px;
     
481.   left: 50%;
     
482.   width: 18px;
     
483.   height: 18px;
     
484.   content: '';
     
485.   margin-left: -9px;
     
486.   border-left: 1px solid #fff;
     
487.   border-bottom: 1px solid #fff;
     
488.   -webkit-transform: rotate(-45deg);
     
489.   transform: rotate(-45deg);
     
490.   box-sizing: border-box;
     
491. }
     
492. 
     
493. 
     
494. 
     
495. #section10 a {
     
496.   padding-top: 60px;
     
497. }
     
498. #section10 a span {
     
499.   position: absolute;
     
500.   top: 0;
     
501.   left: 50%;
     
502.   width: 30px;
     
503.   height: 50px;
     
504.   margin-left: -15px;
     
505.   border: 2px solid #fff;
     
506.   border-radius: 50px;
     
507.   box-sizing: border-box;
     
508. }
     
509. #section10 a span::before {
     
510.   position: absolute;
     
511.   top: 10px;
     
512.   left: 50%;
     
513.   content: '';
     
514.   width: 6px;
     
515.   height: 6px;
     
516.   margin-left: -3px;
     
517.   background-color: #fff;
     
518.   border-radius: 100%;
     
519.   -webkit-animation: sdb10 2s infinite;
     
520.   animation: sdb10 2s infinite;
     
521.   box-sizing: border-box;
     
522. }
     
523. @-webkit-keyframes sdb10 {
     
524.   0% {
     
525.     -webkit-transform: translate(0, 0);
     
526.     opacity: 0;
     
527.   }
     
528.   40% {
     
529.     opacity: 1;
     
530.   }
     
531.   80% {
     
532.     -webkit-transform: translate(0, 20px);
     
533.     opacity: 0;
     
534.   }
     
535.   100% {
     
536.     opacity: 0;
     
537.   }
     
538. }
     
539. @keyframes sdb10 {
     
540.   0% {
     
541.     transform: translate(0, 0);
     
542.     opacity: 0;
     
543.   }
     
544.   40% {
     
545.     opacity: 1;
     
546.   }
     
547.   80% {
     
548.     transform: translate(0, 20px);
     
549.     opacity: 0;
     
550.   }
     
551.   100% {
     
552.     opacity: 0;
     
553.   }
     
554. }

复制代码

JS

1. $(function() {
   
2.   $('a[href*=#]').on('click', function(e) {
   
3.     e.preventDefault();
   
4.     $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
   
5.   });
   
6. });

复制代码