More than 5 years have passed since last update.

Pure Javascript：リンクジャンプ時のスクロールアニメーションのテンプレート

JavaScript

Posted at 2019-01-10

#はじめに
自分のポートフォリオサイトを作った際にリンクジャンプでの画面スクロールアニメーションを実装したので，テンプレートにしてみた．かなり短いコードでそこそこいい感じに動いているっぽいです．(わざとかなり冗長的に書いています）

#テンプレートページ
http://kyomesuke.com/scroll_template/index.html
動作確認はSafariとChromeとFirefoxでしました．

#HTMLのコード

index.html

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="main.css" rel="stylesheet" type="text/css">
	<title>Scroll Template</title>
</head>
<body>
	<header>
		<h2 id="top_title">Scroll Template</h2>
		<h3 class="menuItem" id="sec1_link">Section1</h3>
		<h3 class="menuItem" id="sec2_link">Section2</h3>
		<h3 class="menuItem" id="sec3_link">Section3</h3>
		<h3 class="menuItem" id="sec4_link">Section4</h3>
	</header>
	<section id="dummy"></section>
	<section id="sec1">
		<h2 class="title">Section1</h2>
		ああああああああああああああああああああ
	</section>
	<section id="sec2">
		<h2 class="title">Section2</h2>
		いいいいいいいいいいいいいいいいいいいい
	</section>
	<section id="sec3">
		<h2 class="title">Section3</h2>
		うううううううううううううううううううう
	</section>
	<section id="sec4">
		<h2 class="title">Section4</h2>
		ええええええええええええええええええええ
	</section>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

#Javascriptのコード

main.js

var scrollBody = document.scrollingElement

var sec1Link = document.getElementById("sec1_link");
var sec2Link = document.getElementById("sec2_link");
var sec3Link = document.getElementById("sec3_link");
var sec4Link = document.getElementById("sec4_link");

var dummy = document.getElementById("dummy");
var sec1 = document.getElementById("sec1");
var sec2 = document.getElementById("sec2");
var sec3 = document.getElementById("sec3");
var sec4 = document.getElementById("sec4");
var timer;
const speed = 50;

function delta(obj) {
	var scrollMax = document.body.clientHeight - window.innerHeight
	var goal = obj.offsetTop - dummy.clientHeight;
	var offset = goal - scrollBody.scrollTop;
	if (Math.abs(offset) < speed) {
		scrollBody.scrollTo(0, goal);
	} else {
		scrollBody.scrollBy(0, 0 < offset ? speed : -speed);
		if (scrollBody.scrollTop + speed <= scrollMax) {
			timer = setTimeout(function(){ delta(obj); }, 5);
		} else {
			scrollBody.scrollTo(0, scrollMax);
		}
	}
}

window.onload = function() {
	sec1Link.addEventListener("click", function() {
		clearTimeout(timer);
		timer = setTimeout(function(){ delta(sec1); }, 5);
	}, false);
	sec2Link.addEventListener("click", function() {
		clearTimeout(timer);
		timer = setTimeout(function(){ delta(sec2); }, 5);
	}, false);
	sec3Link.addEventListener("click", function() {
		clearTimeout(timer);
		timer = setTimeout(function(){ delta(sec3); }, 5);
	}, false);
	sec4Link.addEventListener("click", function() {
		clearTimeout(timer);
		timer = setTimeout(function(){ delta(sec4); }, 5);
	}, false);
}

#CSSのコード

main.css

body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #777777;
}

header {
	position: fixed !important;
	top: 0px;
	left: 0px;
	width: 100%;
	min-width: 800px;
	height: 80px;
	text-align: left;
	color: #27292A;
	background-color: #0097A7;
	display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
	user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

header h2#top_title {
	position: absolute;
	margin: 0px 5px 0px 5px;
	padding: 0px;
	top: 0px;
	left: 35px;
	line-height: 80px;
}

header h3.menuItem {
	position: absolute;
	margin: 0px 5px 0px 5px;
	padding: 0px;
	top: 0px;
	line-height: 80px;
}

header h3.menuItem:hover {
	cursor: pointer;
	color: #666666;
}

header h3#sec1_link {
	right: 340px;
}

header h3#sec2_link {
	right: 240px;
}

header h3#sec3_link {
	right: 140px;
}

header h3#sec4_link {
	right: 40px;
}

section#dummy {
	width: 100%;
	height: 80px;
}

section#sec1 {
	width: 100%;
	height: 343px;
	background-color: #90CAF9;
}

section#sec2 {
	width: 100%;
	height: 421px;
	background-color: #F8BBD0;
}

section#sec3 {
	width: 100%;
	height: 407px;
	background-color: #C8E6C9;
}

section#sec4 {
	width: 100%;
	height: 578px;
	background-color: #FFECB3;
}

h2.title {
	margin: 0 auto;
	padding: 15px 0px;
	font-size: 50px;
	color: #27292A;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up