Home > Developer > JavaScript
After the page is loaded, the scroll bar automatically scrolls to a certain position.
We hope that the page will automatically scroll to a certain position on the left after loading. Below is a good method that can be easily implemented.
Yesterday, we needed to automatically scroll to the left of the page after loading.
I always thought that setting a value for document.doc umentElement. scrollLeft on the page will take effect, and the result is disappointing ~
I found out after checking it today:
Use document.doc umentElement. scrollLeft to set the value. It takes effect only when a human event is triggered;
If you want to automatically scroll a certain distance when the page is loaded, use jquery's animate, as shown in the following example:
$ ("Html, body"). animate ({"scrollLeft": "300px"}, 1000 );
$ ("Html, body"). animate ({"scrollTop": "300px"}, 1000 );
Demo:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> auto-scroll </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 </a>
</Div>
<! -- Container end -->
<Script type = "text/javascript">
/* Window. onload = function (){
Window. scroll (0,300 );
$ (". Btn"). on ("click", function (){
Document.doc umentElement. scrollLeft = "500 ";
Var oTop = document. body. scrollTop | document.doc umentElement. scrollTop;
Var oLeft = document. body. scrollLeft | document.doc umentElement. scrollLeft;
Alert (oLeft );
});
}*/
$ (Function (){
$ ("Html, body"). animate ({"scrollLeft": "300px"}, 1000 );
});
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
