htmlanchor java_HTML中锚点的使用_动力节点Java学院整理

现在总结一下控制锚点的几种情况：

1. 在同一页面中

跳转到add

2. 在不同页面中，锚点定位在a.html中，从另外一个页面的链接跳转到这个锚点

跳转到a.add

3. 点击链接触发js事件，同时跳转到锚点，有两种处理方式：

第一种：

触发add函数并跳转到add锚点

第二种：

通过scrollIntoView实现锚点效果

在html中设置锚点定位有几种方法，使用id定位、使用name定位、使用js定位，这些方法不一定是最全的，只可以参考下

1、使用id定位：

锚点1

11111111111

11111111111

11111111111

11111111111

11111111111

这样的定位可以针对任何标签来定位。

2、使用name定位：

锚点5

1111111

使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。

3、使用js定位

实例：

js 锚点平滑定位

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;

}

function intval(v){

v = parseInt(v);

return isNaN(v) ? 0 : v;

} // ?取元素信息

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

};

} // ?取??条信息

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

};

} // ?点(Anchor)?平滑跳?

function scroller(el, duration){

if (typeof el != 'object') {

el = document.getElementById(el);

}

if (!el)

return;

var z = this;

z.el = el;

z.p = getPos(el);

z.s = getScroll();

z.clear = function(){

window.clearInterval(z.timer);

z.timer = null

};

z.t = (new Date).getTime();

z.step = function(){

var t = (new Date).getTime();

var p = (t - z.t) / duration;

if (t >= duration + z.t) {

z.clear();

window.setTimeout(function(){

z.scroll(z.p.y, z.p.x)

}, 13);

}

else {

st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;

sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;

z.scroll(st, sl);

}

};

z.scroll = function(t, l){

window.scrollTo(l, t)

};

z.timer = window.setInterval(function(){

z.step();

}, 13);

}

header_1 --> header_4

header_2 --> header_5

header_3 --> header_6

header_4 --> header_7

header_5 --> header_3

header_6 --> header_2

header_7 --> header_1