Window.scrollTo() - 絶対指定でスクロールする

2017/10/18

scrollTo()は、Windowのメソッドです。絶対位置を指定してスクロールします。このメソッドは、scroll()のエイリアスです。

概要

名前

scrollTo

所属

IDL

void scrollTo(optional ScrollToOptions options);
void scrollTo(unrestricted double x, unrestricted double y);

dictionary ScrollToOptions : ScrollOptions {
    unrestricted double left;
    unrestricted double top;
};

dictionary ScrollOptions {
    ScrollBehavior behavior = "auto";
};

enum ScrollBehavior { "auto", "instant", "smooth" };

仕様書

https://drafts.csswg.org/cssom-view/#dom-window-scrollto

説明

scroll()の説明をご参考下さい。

デモ

Window.scrollTo()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
body { word-break: break-all ; background-image: linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0),linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0) ; background-size: 20px 20px ; background-position: 0 0,10px 10px ; }
div#result { white-space: pre-wrap ; position: fixed ; top: 12px ; left: 50% ; width: 200px ; margin-left: -100px ; }
div#dummy-x { width: 9999px ; height: 1px ; }
div#dummy-y { width: 1px ; height: 9999px ; }
div#buttons { position: fixed ; top: 150px ; overflow: hidden ; left: 50% ; width: 300px ; margin-left: -150px ; }
div#buttons p { float: left ; margin-top: 12px ; width: 300px ; text-align: center ; }
</style>
</head>
<body>
<div id="buttons">
	<p><button id="scroll1">絶対位置 scroll( x, y )</button> <button id="scroll2">絶対位置 scroll( options )</button></p>
	<p><button id="scrollTo1">絶対位置 scrollTo( x, y )</button> <button id="scrollTo2">絶対位置 scrollTo( options )</button></p>
	<p><button id="scrollBy1">相対位置 scrollBy( x, y )</button> <button id="scrollBy2">相対位置 scrollBy( options )</button></p>
</div>
<div id="result"></div>
<div id="dummy-x"></div>
<div id="dummy-y"></div>
<script>
var optionsObject = {
	top: 400 ,
	left: 400 ,
	behavior: "smooth" ,
} ;

addEventListener( "scroll", getInfo ) ;
getInfo() ;

document.getElementById( "scroll1" ).onclick = function () { scroll( 50, 50 ) ; }
document.getElementById( "scroll2" ).onclick = function () { scroll( optionsObject ) ; }
document.getElementById( "scrollTo1" ).onclick = function () { scrollTo( 50, 50 ) ; }
document.getElementById( "scrollTo2" ).onclick = function () { scrollTo( optionsObject ) ; }
document.getElementById( "scrollBy1" ).onclick = function () { scrollBy( 50, 50 ) ; }
document.getElementById( "scrollBy2" ).onclick = function () { scrollBy( optionsObject ) ; }

function getInfo () {
	document.getElementById( "result" ).textContent = "" ;

	appendText( "scrollX: " + scrollX + "\n" ) ;	
	appendText( "pageXOffset: " + pageXOffset + "\n" ) ;
	appendText( "scrollY: " + scrollY + "\n" ) ;	
	appendText( "pageYOffset: " + pageYOffset + "\n" ) ;
}

function appendText ( text ) {
	document.getElementById( "result" ).appendChild( document.createTextNode( text ) ) ;
}
</script>
</body>
</html>

サポート状況

Features	Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
scrollTo()	●	●	●	●	●	●	●	●
options object	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
left	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
top	● 61+	● 36+	● 10+	×	×	● 48+	● 10.0+	×
behavior	● 61+	● 36+	×	×	×	● 48+	×	×

概要

説明

デモ

サポート状況

関連記事