緩急をつけたscrollを実装したいです！

◎実現したいこと

https://simablog.net/portfolio/protfoliopage/

こちらの方のサイトのボタンを押すと最初はゆっくりで後半にかけてスピードが早くなるようなスクロールを実装したいです。
（ファーストビューの「whos me?」を押すと、今回私が実装したいと考えているスクロールが流れます。）

◎試したこと

smooth.scrollやwow.jsなどプラグインを検索しましたが、スクロールの開始時間を設定する方法を見つけることができませんでした。
仮説としてはjQueryのプラグインなどで実装できるかなと考えております。

takopo

2020/09/26 08:40

作成したコードを載せていただいた方が回答を得られやすくなると思います。

退会済みユーザー

2020/09/26 21:40

わかりました。

行動規範の内容に同意します

回答1件

ベストアンサー

作ってみました。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7    <style>
8		html {
9			height: 100%;
10		}
11
12		body {
13			display: flex;
14			flex-direction: column;
15			height: 200%;
16		}
17
18        #first {
19			display: flex;
20			justify-content: center;
21			align-items: center;
22            width: 100%;
23            height: 50%;
24            background-color: red;
25        }
26
27        #next {
28            width: 100%;
29            height: 50%;
30            background-color: green;
31        }
32
33		#button {
34			width: 10rem;
35			height: 2rem;
36		}
37    </style>
38</head>
39<body>
40    <div id="first">
41		<button id="button">Click</button>
42	</div>
43	<div id="next"></div>
44	<script>
45		// HTMLElement に非同期でイベントを監視するメソッドを追加
46		HTMLElement.prototype.observe = function (type) {
47			return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
48		};
49
50		// 非同期で指定ミリ秒待つ
51		const delay = ms => {
52			return new Promise(resolve => setTimeout(resolve, ms));
53		};
54
55		// 加速スクロールアップ
56		// element = スクロールする要素、acceleration = 加速度、last = スクロールの最後の値
57		const acceleratedScrollUp = async (element, acceleration, last) => {
58
59			// 1 から last まで acceleration にしたがって加速度的に増える値を返す
60			function* getOffset() {
61				for (let i = 1; i < last; i *= acceleration) {
62					yield i;
63				}
64				yield last;
65			}
66
67			// getOffset() の返す値まで 10ms 間隔で順次スクロール
68			for (const offset of getOffset()) {
69				await delay(10);
70				element.scrollTop = offset;
71			}
72		};
73
74		(async () => {
75			while (true) {
76				// ボタンが押されるのを待つ
77				await document.getElementById("button").observe("click");
78
79				// ドキュメント全体を加速度 1.1 で #next の位置まで加速スクロールアップ
80				await acceleratedScrollUp(
81					document.documentElement,
82					1.1,
83					document.getElementById("next").offsetTop
84				);
85			}
86		})();
87	</script>
88</body>
89</html>
90