Using JavaScript to achieve smooth jump _javascript between anchor points (anchors)

Anchors (anchor) believe that many people are not unfamiliar, it is convenient for visitors to jump in different positions on the page, directly to find their own content of interest, if the RSS is the entire site summary, the anchor is a summary of the page, usually a lot of page content, will use anchor points to locate.

But the anchor point also has a problem, usually click on the anchor point, the page will immediately jump to the target position, and the method introduced in this article, the implementation of the anchor point (anchor) between the smooth jump, the effect is very good.

Copy Code code as follows:

<script type= "Text/javascript" >
Description: Use Javascript to achieve a smooth jump between anchors (anchor).
Source: Thickbox 2.1
Finishing: 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 jumps between anchor points (anchors)
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>

Call Mode:

Copy Code code as follows:

Scroller (el, duration)
El: Target anchor Point ID
Duration: Duration, in milliseconds, smaller, faster

Html:

Copy Code code 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>

Test code:

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<meta name= "keywords" content= "smooth, anchor point, Anchor, jump, scroll, JavaScript,"/>
<meta name= "description" content= Anchor point (anchor) believe that many people are not unfamiliar, it is convenient for visitors in the different positions of the page quickly jump, directly find their content of interest, if said RSS is the entire site summary, The anchor point is a summary of the page, usually a lot of page content, will use anchor point to locate. "/>
<title> use JavaScript to achieve smooth jumps between anchor points (anchors)-smoothing, anchor points, anchors, jumps, scrolling, JavaScript, </title>

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

<body>

<div class= "AD" >
</div>

<br/>

<div id= "Example" >

<div id= "Example_main" >


<!--************************************* instance code started *************************************-->

<script type= "Text/javascript" >

Description: Use Javascript to achieve a smooth jump between anchors (anchor).
Source: Thickbox 2.1
Finishing: 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 jumps between anchor points (anchors)
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>

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

<!--************************************* instance code end *************************************-->


</div>

<div id= "Back" ><a href= "http://www.jb51.net" > Return home </a></div>

</div>

<br/>

<div class= "AD" >
</div>

</body>