Using Javascript to achieve smooth jump between anchors_javascript skills

I believe many people are familiar with Anchor. It facilitates visitors to quickly jump to different locations on the page and directly find the content they are interested in. If RSS is a summary of the entire website, then the anchor is a summary of a page. , usually when a page contains a lot of content, anchor points will be used to position it.

But there is also a problem with anchor points. Usually, after clicking the anchor point, the page will jump to the target location immediately. However, the method introduced in this article achieves smooth jump between anchor points (Anchor), and the effect is very good.

Copy code The code is as follows:

<script type="text/javascript">
// Description: Use Javascript to achieve smooth jump between anchors
// Source: ThickBox 2.1
// Organized by: Yanfu Xie [xieyanfu@yahoo.com.cn]
/ / Date: 07.01.17
// Convert to number
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 scroll bar 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 };
}
// Smooth jump between anchor points (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);
}
</script>

Calling method:

Copy code The code is as follows:

scroller(el, duration)
el : target anchor ID
duration : duration, in milliseconds, the smaller the faster

HTML:

Copy code The code is as follows:

<style type="text/css">
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>
<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>

测试代码：

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="平滑, 锚点, Anchor, 跳转, 滚动, javascript, " />
<meta name="description" content="锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。" />
<title>用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动, javascript, </title>

<link rel="stylesheet" href="/admin/tpl/default/css/pub_example.css" type="text/css" />

</head>
<body>

<div class="ad">
</div>

<br />

<div id="example">

  <h3 id="example_title">Use Javascript to implement anchor points (Anchor) smooth jump</h3>

                                                                                                                   . ********************************* Example code starts****************** *******************-->

<script type="text/javascript">

// Description : Use Javascript to achieve smooth jumps between anchors
// Source: ThickBox 2.1
// Organized by: Yanfu Xie [xieyanfu@yahoo.com.cn]
// Date: 07.01.17

//Convert to number
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 scroll bar 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 };
}

// Smooth jump between anchor points (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 {                                                                                                                                                                     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);
}

</script>

<style type="text/css">
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>

<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>

<!--************************************* 实例代码结束 *************************************-->


    </div>

    <div id="back"><a href="http://www.jb51.net">返回 首页</a></div>

</div>

<br />

<div class="ad">
</div>

</body>
</html>