After the page is loaded the scroll bar will automatically scroll to a certain position
- 2020-03-30 02:05:01
- OfStack
Yesterday, there was a demand, is that the page is loaded after the left automatically scroll a certain position.
Always thought that as long as give page of the document. The documentElement. ScrollLeft Settings will take effect, a number results disappointed ~
When I checked it today, I found:
Use the document. The documentElement. ScrollLeft setting values, to come into force must be under the artificial event triggers;
To automatically scroll a certain distance when a page is loaded, use jquery's animate, as in the following example:
$(" HTML, body "). The animate ({" scrollLeft ":" 300 px "}, 1000);
$(" HTML, body "). The animate ({" scrollTop ":" 300 px "}, 1000);
The demo:
Always thought that as long as give page of the document. The documentElement. ScrollLeft Settings will take effect, a number results disappointed ~
When I checked it today, I found:
Use the document. The documentElement. ScrollLeft setting values, to come into force must be under the artificial event triggers;
To automatically scroll a certain distance when a page is loaded, use jquery's animate, as in the following example:
$(" HTML, body "). The animate ({" scrollLeft ":" 300 px "}, 1000);
$(" HTML, body "). The animate ({" scrollTop ":" 300 px "}, 1000);
The demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Automatic rolling </title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<script type="text/javascript" src="https://www.gamebox.com/js/jquery.js"></script>
</head>
<body>
<!-- container start -->
<div class="container" style="height: 3000px; width: 3000px;">
<a class="btn" href="javascript:;"> Click on the </a>
</div>
<!-- container end -->
<script type="text/javascript">
$(function(){
$("html,body").animate({"scrollLeft": "300px"}, 1000);
});
</script>
</body>
</html>