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
Detailed explanation of GaussDB for MySQL performance optimization
Table of contents background Inspiration comes fr...
Why do select @@session.tx_read_only appear in DB in large quantities?
Find the problem When retrieving the top SQL stat...
Detailed explanation of common methods of JavaScript Array
Table of contents Methods that do not change the ...
The latest mysql-5.7.21 installation and configuration method
1. Unzip the downloaded MySQL compressed package ...
JavaScript data type conversion example (converting other types to strings, numeric types, and Boolean types)
Preface What is data type conversion? The default...
js to realize login and registration functions
This article example shares the specific code of ...
In-depth understanding of MySQL various locks
Table of contents Lock Overview Lock classificati...
How to deploy Go web applications using Docker
Table of contents Why do we need Docker? Docker d...
MySQL transaction analysis
Transaction A transaction is a basic unit of busi...
The benefits and examples of placing the site map at the bottom of the web page
In the past, almost every website had a sitemap p...
Mybatis fuzzy query implementation method
Mybatis fuzzy query implementation method The rev...
Notes on MySQL case sensitivity
Table of contents MySQL case sensitivity is contr...
Interaction in web design: A brief discussion on paging issues
Function: Jump to the previous page or the next p...
Html+CSS drawing triangle icon
Let’s take a look at the renderings first: XML/HT...
Four ways to switch tab pages in VUE
Table of contents 1. Static implementation method...