ページトップボタンのついているサイトの中で、ボタンの色がシュッと色が変わって、シャキッとページトップに移動するサイトって少なくないですね。

お硬いサイトやなんかはそれで良いと思うのですが、デザインに凝っているサイトだったり、やわらかコンテンツのサイトだったりすると、シャキッよりも、ニュ〜だったり、スル〜だったりのほうが良い場合もあります。

わざわざそのためだけにjQueryってのも大げさなので、cssだけで実現。

方法はいくつかありますが、ゆるっとスクロールには「scroll-behavior: smooth」。じわ〜っと色変わりには「transition」が、最も手軽にできちゃうかな。

こ〜んな感じです。

html {
	scroll-behavior: smooth;
}

#page-top:hover {
	background-color: #ffffff;
	border: 1px #1baacc solid;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}
#page-top:hover a {
	color: #1baacc;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
}

scroll-behavior: smooth は、htmlに設定することでサイト全体に活きてくるのですね。便利便利。