https://yokohama-landmark.jp/common/js/scroll.js

1/* ------------------------------
2  scroll
3------------------------------ */
4
5/* URL hash flicker guard
6------------------------------*/
7(function () {
8	const hash = location.hash;
9	if (!hash) return;
10	// for Safari
11	window.addEventListener('pageshow', function (e) {
12		if (e.persisted) {
13			if ('scrollRestoration' in history) {
14				history.scrollRestoration = 'auto';
15			}
16		}
17	});
18	// for All
19	if ('scrollRestoration' in history) {
20		history.scrollRestoration = 'manual';
21	}
22	let cancel = false;
23	function forceTop() {
24		window.scrollTo(0, 0);
25		document.documentElement.scrollTop = 0;
26		document.body.scrollTop = 0;
27		if (!cancel) {
28			requestAnimationFrame(forceTop);
29		}
30	}
31	requestAnimationFrame(forceTop);
32	window.addEventListener('load', function () {
33		cancel = true;
34		forceTop();
35	}, { once: true });
36})();
37
38
39/* link
40------------------------------*/
41$(function () {
42	// scroll position
43	function getScrollPosition(target) {
44		if (!target.length) return null;
45		return target.offset().top;
46	}
47
48	// anchor link
49	$('[href^="#"]').not('[class*="noscroll"]').on('click', function () {
50		const h = $(this).attr("href");
51		const t = $(h == "#" || h == "" ? 'body' : h);
52		if (!t.length) return false;
53
54		const p = getScrollPosition(t);
55		if (p === null) return false;
56
57		$('html,body').animate({
58			scrollTop: p
59		}, 500);
60		const prevTabindex = t.attr('tabindex');
61		setTimeout(function() {
62			const el = t.attr('tabindex', '-1')[0];
63			el.focus({ preventScroll: true });
64
65			setTimeout(function() {
66				el.style.outline = 'none';
67			}, 500);
68
69			el.addEventListener('blur', function handler() {
70				el.style.outline = '';
71				if (prevTabindex === undefined) {
72					t.removeAttr('tabindex');
73				} else {
74					t.attr('tabindex', prevTabindex);
75				}
76				el.removeEventListener('blur', handler);
77			});
78		}, 500);
79		return false;
80	});
81
82	// URL hash
83	function runAfterLoad(callback) {
84		if (document.readyState === 'complete') {
85			callback();
86		} else {
87			window.addEventListener('load', callback, { once: true });
88		}
89	}
90	const hash = location.hash;
91	if (hash) {
92		const target = $(hash);
93		if (target.length) {
94			setTimeout(function () {
95				$('html, body').scrollTop(0);
96
97				runAfterLoad(function () {
98					setTimeout(function () {
99						const p = getScrollPosition(target);
100						if (p === null) return;
101
102						$('html, body').stop().animate({
103							scrollTop: p
104						}, 500);
105					}, 100);
106				});
107			}, 1);
108		}
109	}
110});