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
JavaScript implements simple scroll window
This article example shares the specific code of ...
XHTML three document type declarations
XHTML defines three document type declarations. T...
How to dynamically modify container port mapping in Docker
Preface: Docker port mapping is often done by map...
Let you understand how HTML and resources are loaded
All content in this blog is licensed under Creati...
Linux kernel device driver character device driver notes
/******************** * Character device driver**...
Teach you step by step to configure MySQL remote access
Preface When using the MySQL database, sometimes ...
Mysql get table comment field operation
I won't say much nonsense, let's just loo...
How to design MySQL statistical data tables
Table of contents Is real-time update required? M...
Analysis of the causes of accidents caused by Unicode signature BOM
Maybe you are using include files here, which is u...
Nginx reverse proxy springboot jar package process analysis
The common way to deploy a springboot project to ...
JavaScript to implement click to switch verification code and verification
This article shares the specific code of JavaScri...
How to implement animation transition effect on the front end
Table of contents Introduction Traditional transi...
How to view the status of remote server files in Linux
As shown below: The test command determines wheth...
Information transmission and function calls between WeChat mini program pages and components
In this article, I will explain the relevant cont...
How to install the graphical interface in Linux
1. Linux installation (root user operation) 1. In...