The use of anchor points in HTML_PowerNode Java Academy
|
Now let's summarize several situations of controlling anchor points: 1. On the same page <a name="add"></a><!-- Define anchor point--> <a href="#add">Jump to add</a> 2. In different pages, the anchor is located in a.html, and the link from another page jumps to this anchor <a href="a.html#add">Jump to a.add</a> 3. Clicking a link triggers a js event and jumps to the anchor point. There are two ways to handle this: The first one: <a href="#add" onclick="add()">Trigger the add function and jump to the add anchor point</a> Second type:
<div id="divNode"><!-- contents --></div><!-- Assume a node that needs to be jumped to-->
<a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">Realize the anchor effect through scrollIntoView</a>
There are several ways to set anchor positioning in HTML, using ID positioning, name positioning, and JS positioning. These methods are not necessarily the most complete, so you can only refer to the following 1. Use id positioning: <a href="#1F" name="1F">Anchor Point 1</a> <div name="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br> </p> </div> This positioning can be targeted at any label. 2. Use name positioning: <a href="#5F">Anchor Point 5</a> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <a name="5F">1111111</href> The name attribute can only be used to locate the a tag, but it cannot be used to locate other tags such as div. 3. Use js positioning
<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()"></li>Examples: js anchor point smooth positioning
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<style type="text/css" mce_bogus="1">
div.test {
width: 400px;
margin: 5px auto;
border: 1px solid #ccc;
}
div.test strong {
font-size: 16px;
background: #fff;
border-bottom: 1px solid #aaa;
margin: 0;
display: block;
padding: 5px 0;
text-decoration: underline;
color: #059B9A;
cursor: pointer;
}
div.test p {
height: 400px;
background: #f1f1f1;
margin: 0;
}
</style>
<script type="text/javascript">
function intval(v){
v = parseInt(v);
return isNaN(v) ? 0 : v;
} // Get element information function getPos(e){
var l = 0;
var t = 0;
var w = intval(e.style.width);
var h = intval(e.style.height);
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent) {
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
return {
x: l,
y: t,
w: w,
h: h,
wb: wb,
hb: hb
};
} // Get a piece of information function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h:h
};
} //?Point (Anchor)?Smooth jump?
function scroller(el, duration){
if (typeof el != 'object') {
el = document.getElementById(el);
}
if (!el)
return;
var z = this;
z.el = el;
zp = getPos(el);
zs = getScroll();
z.clear = function(){
window.clearInterval(z.timer);
z.timer = null
};
zt = (new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t - zt) / duration;
if (t >= duration + zt) {
z.clear();
window.setTimeout(function(){
z.scroll(zpy, zpx)
}, 13);
}
else {
st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpy - zst) + zst;
sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (zpx - zsl) + zsl;
z.scroll(st, sl);
}
};
z.scroll = function(t, l){
window.scrollTo(l, t)
};
z.timer = window.setInterval(function(){
z.step();
}, 13);
}
</script>
</head>
<body>
<div class="test">
<a name="header_1" id="header_1"></a>
<strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_2" id="header_2"></a>
<strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_3" id="header_3"></a>
<strong onclick="javascript:scroller('header_6', 800);">header_3 --> header_6</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_4" id="header_4"></a>
<strong onclick="javascript:scroller('header_7', 800);">header_4 --> header_7</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_5" id="header_5"></a>
<strong onclick="javascript:scroller('header_3', 800);">header_5 --> header_3</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_6" id="header_6"></a>
<strong onclick="javascript:scroller('header_2', 800);">header_6 --> header_2</strong>
<p>
</p>
</div>
<div class="test">
<a name="header_7" id="header_7"></a>
<strong onclick="javascript:scroller('header_1', 800);">header_7 --> header_1</strong>
<p>
</p>
</div>
</body>
</html>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Nginx 502 Bad Gateway Error Causes and Solutions
>>: MySQL 5.5.27 winx64 installation and configuration method graphic tutorial
Recommend
Detailed explanation of the principle and function of Vue list rendering key
Table of contents The principle and function of l...
vue-amap installation and usage steps
I have previously shared the usage of asynchronou...
Solution to the problem of not being able to obtain the hostname of the host in the docker container
The test is passed in the nodejs environment. The...
The One-Hand Rule of WEB2.0
<br />My previous article about CSS was not ...
Vue3 navigation bar component encapsulation implementation method
Encapsulate a navigation bar component in Vue3, a...
How to use Baidu Map API in vue project
Table of contents 1. Register an account on Baidu...
Vue state management: using Pinia instead of Vuex
Table of contents 1. What is Pinia? 2. Pinia is e...
Hover zoom effect made with CSS3
Result:Implementation code: html <link href=&#...
How to configure pseudo-static and client-adaptive Nginx
The backend uses the thinkphp3.2.3 framework. If ...
Detailed explanation of the construction and use of Docker private warehouse
The image can be saved on hub.docker.com, but the...
JavaScript web form function communication full of practical information
1. Introduction Earlier we talked about the front...
How to use node to implement static file caching
Table of contents cache Cache location classifica...
Detailed installation tutorial of Docker under CentOS
Docker is divided into CE and EE. The CE version ...
Vue's global watermark implementation example
Table of contents 1. Create a watermark Js file 2...
Implementation of mysql decimal data type conversion
Recently, I encountered a database with the follo...