JavaScript gets the scroll bar position and slides the page to the anchor point
PrefaceThis article records a problem I encountered in my recent work. In the process of hybrid development of app native and front-end h5, one of the pages is the page for selecting a city list, similar to the city selection in Meituan and Ele.me, the bank list selection in the bank app, and the quick positioning of the anchor point of the contact selection in the address book. As a beginner, I feel that this function is still a bit stressful. Let me share some of the implementation methods I found. What is the anchor point problem?For PC-side web pages, the back-to-top button on the right side of the common web page, click it to jump directly to the top of the web page, which is the realization of the anchor point; For mobile devices, open your phone's address book, click on the letter on the right, and the page will jump directly to the contact with the corresponding letter. This is also the implementation of the anchor point. Common solutions1. The href attribute in the <a> tag is set to the value of the id of the jump element
<style>
#mydiv{
height: 1200px;
width: 100%;
background-color: pink;
position: relative;
}
a{
position: absolute;
top: 1000px;
left: 1000px;
}
</style>
<div id="mydiv">
I am the top of the page</div>
<a href="#mydiv" rel="external nofollow" >Back to top</a>The above method is equivalent to setting a hyperlink, and the a tag jumps directly, but this will change the address in the browser address bar, which is not very practical. 2. Native js gets the scroll bar position and changes scrollTop
<style>
body{
position: relative;
}
h1{
margin: 0 auto;
}
.mybtn1{
position: fixed;
left: 200px;
top: 500px;
}
.mybtn2{
position: fixed;
left: 200px;
top: 550px;
}
</style>
<body>
<h1 id="topH1">1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1 id="tobtmH1">7</h1>
<button class="mybtn1" onclick="toTop()">Back to top</button>
<script>
function toTop(){
var topH1 = document.getElementById("topH1")
document.documentElement.scrollTop=topH1.offsetTop
window.pageYOffset=topH1.offsetTop
document.body.scrollTop=topH1.offsetTop;
}
</script>
</body>This method is to add a click event to the button and change the scroll bar position after the click event is triggered. However, this method requires dealing with compatibility issues, which is troublesome. It has been tested and found to be effective on PC and mobile terminals. 3.element.scrollIntoview makes the scroll bar change according to the view
<style>
body{
position: relative;
}
.mydiv{
margin-top: 100px;
border: 1px solid pink;
}
h1{
margin: 0 auto;
}
.mybtn1{
position: fixed;
left: 200px;
top: 500px;
}
.mybtn2{
position: fixed;
left: 200px;
top: 550px;
}
</style>
<body>
<div class="mydiv">
<h1 id="topH1">1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1 id="tobtmH1">7</h1>
</div>
<button class="mybtn1" onclick="toTop()">Back to top</button>
<button class="mybtn2" onclick="toBtm()">Go to the bottom</button>
<script>
window.onload = function(){
}
// The calling method is element.scrollIntoview()
//When the parameter is true, the page or container scrolls so that the top of the element is aligned with the top of the view container //When the parameter is false, the bottom of the element is aligned with the bottom of the view container function toTop(){
var topH1 = document.getElementById('topH1')
topH1.scrollIntoView(true)
}
function toBtm() {
var tobtmH1 = document.getElementById('tobtmH1')
tobtmH1.scrollIntoView(false)
}
</script>
</body>The above method is to jump the anchor point to the top or bottom of the view. It does not have too many disadvantages and has been tested and proven to be effective on both PC and mobile devices. Advanced solutionsThe advanced method is to call the third-generation plug-in better-scroll. This method has not been tested personally, and there are not too many pitfalls in the data. If you need it, add it yourself. The above is the details of JavaScript getting the scroll bar position and sliding the page to the anchor point. For more information about JavaScript scroll bar sliding to anchor point, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: A comprehensive summary of frequently used statements in MySQL (must read)
>>: 6 solutions for network failure in Docker container
Recommend
A detailed introduction to Linux system operation levels
Table of contents 1. Introduction to Linux system...
How to redraw Button as a circle in XAML
When using XAML layout, sometimes in order to make...
How to query the latest transaction ID in MySQL
Written in front: Sometimes you may need to view ...
HTML table markup tutorial (22): row border color attribute BORDERCOLORLIGHT
Within rows, light border colors can be defined i...
Detailed explanation of the organizational structure diagram case of Vue's vue-tree-color component
Table of contents npm Install the loader Import P...
MySQL 4 common master-slave replication architectures
Table of contents One master and multiple slaves ...
Example of converting webpack images to base64
Download url-loader yarn add -D url-loader module...
SQL method for calculating timestamp difference
SQL method for calculating timestamp difference O...
Detailed explanation of MySQL master-slave replication practice - replication based on log points
Logpoint-based replication 1. Create a dedicated ...
Reasons and solutions for being unable to remotely connect to MySQL database under CentOS7
Preface I recently encountered a problem at work....
HTML+CSS to create heartbeat special effects
Today we are going to create a simple heartbeat e...
JavaScript to achieve dynamic color change of table
This article shares the specific code for JavaScr...
Detailed explanation of several API examples commonly used in advanced javascript front-end development
Table of contents MutationObserver API Features I...
Detailed explanation of Linux LVM logical volume configuration process (create, increase, reduce, delete, uninstall)
Detailed explanation of Linux LVM logical volume ...
Basic tutorial on controlling Turtlebot3 mobile robot with ROS
Chinese Tutorial https://www.ncnynl.com/category/...