Preface
This 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 that selects the city list, similar to the functions of Meituan Ele.me city selection, bank list selection in bank app, and quick positioning of the anchor position selected by the contact in the address book. As I have just started, I feel that this function is still a little stressful. Let me share some of the implementation methods I found.
What is an anchor point problem
For PC-side web pages, the common button on the right side of the web page back to the top and click to jump directly to the top of the web page, which is the implementation of the anchor point;
For mobile terminals, open your phone's address book, click on the letter on the right, and the page will jump directly to the contact person with the corresponding letter. This is also the implementation of the anchor point.
Common solutions
1. 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 >
I'm at the top of the page
</div>
<a href="#mydiv" rel="external nofollow" >Back to top</a>
The above method is equivalent to setting up a hyperlink, and the a tag jumps directly, but it doesn't feel practical to change the address in the browser address bar in this way.
2. Native js get the scrollbar position and make changes to 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 >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 >7</h1>
<button class="mybtn1" onclick="toTop()">Back to top</button>
<script>
function toTop(){
var topH1 = ("topH1")
=
=
= ;
}
</script>
</body>
This method is to add a click event to the button and change the scroll bar position after triggering the click event. However, this method requires the compatibility problem to be handled more troublesome, and the PC-side mobile terminal is effective for testing.
Make 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 >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 >7</h1>
</div>
<button class="mybtn1" onclick="toTop()">Back to top</button>
<button class="mybtn2" onclick="toBtm()">Go to the bottom</button>
<script>
=function(){
}
// The call method is () //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 = ('topH1')
(true)
}
function toBtm() {
var tobtmH1 = ('tobtmH1')
(false)
}
</script>
</body>
The above method is to jump the anchor point to the top or bottom of the view, without many disadvantages, and the PC-side mobile terminal is effective.
Advanced solutions
The advanced method is to call the third plug-in better-scroll. This method has not been tested in person, and there are not many pitfalls in viewing the information. If you need it, add it yourself.
The above is the detailed content of JavaScript to obtain the scroll bar position and slide the page to the anchor point. For more information about sliding the JavaScript scroll bar to the anchor point, please follow my other related articles!