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
MySQL 8.0.11 installation and configuration method graphic tutorial (win10)
This article records the installation and configu...
The url value of the src or css background image is the base64 encoded code
You may have noticed that the src or CSS backgroun...
How to start the spring-boot project using the built-in linux system in win10
1. Install the built-in Linux subsystem of win10 ...
What we have to say about CSS absolute and relative
Written in the opening: Absolute said: "Rela...
Antd+vue realizes the idea of dynamic verification of circular attribute form
I hope to implement some properties of the query ...
Teach you how to implement Vue3 Reactivity
Table of contents Preface start A little thought ...
Detailed explanation of Docker's most commonly used image commands and container commands
This article lists the most commonly used image c...
Complete steps to reset the root user password in mysql8
Preface Recently, many new colleagues have asked ...
MySQL 5.7.21 installation and password configuration tutorial
MySQL5.7.21 installation and password setting tut...
What to do if you forget the initial password of MySQL on MAC
The method to solve the problem of forgetting the...
js to realize the rotation of web page pictures
This article shares the specific code of js to re...
Reasons and solutions for MySQL selecting the wrong index
In MySQL, you can specify multiple indexes for a ...
How to deploy zabbix_agent in docker
zabbix_agent deployment: Recommendation: zabbix_a...
A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)
Overview Binlog2sql is an open source MySQL Binlo...
How to start a transaction in MySQL
Preface This article mainly introduces how to sta...