用Javascript实现锚点(Anchor)间平滑跳转

锚点(Anchor)相信很多人都不陌生，它方便访问者在页面的不同位置快速跳转，直接找到自己感兴趣的内容，如果说 RSS 是整个网站的摘要，那锚点就是一个页面的摘要，通常一个页面内容很多的时候，都会用锚点来定位。

但是锚点也有个问题，通常点击锚点后，页面会立即跳到目标位置，而本文介绍的方法，实现了锚点(Anchor)间平滑跳转，效果非常不错。


代码如下:

<script type="text/javascript">
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn]
// 日期 ：07.01.17
// 转换为数字
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);
}
</script>

调用方式：


代码如下:

scroller(el, duration)
el : 目标锚点 ID
duration : 持续时间，以毫秒为单位，越小越快

HTML:


代码如下:

<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">用 Javascript 实现锚点(Anchor)间平滑跳转</h3>

<div id="example_main">

<!--************************************* 实例代码开始 *************************************-->

<script type="text/javascript">

// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn]
// 日期 ：07.01.17

// 转换为数字
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);
}

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

赞 (0)

相关推荐

  • javascript URL锚点取值方法

    location.href='ping.html#chen=陈建平' 取锚点值 location.hash 结果是:#chen=陈建平 location.href='ping.html?chen=陈建平' 取?后面的值 location.href.search() 结果是:?chen=陈建平 再用substring(1) 就可以取#或?后的值了,再用split()方法可以把多个参数放入数据中 var args=xx.split('&')

  • JavaScript for in锚点的动态创建

    测试for..in ") ; } //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] <!--锚点的使用--> test anchor 跳转目标对象处 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] //状态栏文字的滚动 测试状态栏字符的滚动 = msg.length) { seq = 0 ; window.status = "" ; window.setTimeout("scrollStr();",int

  • JS锚点的设置与使用方法

    JS锚点的设置与使用方法

    本文实例讲述了JS锚点的设置与使用方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>锚点</title> </head> <body> <ul> <li><a href="javascript:vo

  • JavaScript返回网页中锚点数目的方法

    本文实例讲述了JavaScript返回网页中锚点数目的方法.分享给大家供大家参考.具体如下: JavaScript返回网页中锚点的数目,下面的JS代码获取页面中的anchor数量 <!DOCTYPE html> <html> <body> <a name="html">HTML Tutorial</a><br> <a name="css">CSS Tutorial</a>

  • JavaScript组件焦点与页内锚点间传值的方法

    JavaScript组件焦点与页内锚点间传值的方法

    本文实例讲述了JavaScript组件焦点与页内锚点间传值的方法.分享给大家供大家参考.具体分析如下: 上述的这两个小功能在一些新式的手机页面是很有用的. 如何光标放上输入框就触发事件,离开输入框就触发另一个事件呢?即使用户不输入任何东西-- 页间传值很简单,但在页内的锚点之间是如何传值呢? 一.基本目标 有一个页面,上面有一个输入框,一个超级链接,这两个东西是没有任何关联的, 只是因为功能不大,所以把两个功能合起来写 1.输入框功能 一旦把光标放上对话框背景就变成红色,一旦用户的鼠标点击其他地

  • javascript 动态数据下的锚点错位问题解决方法

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>用 Javascript 实现锚点(Anchor)间平滑跳转</title> <script language="javascript"> // 说明 :用 Javascript 实现锚点(Anchor)间平滑跳转 //

  • 用Javascript实现锚点(Anchor)间平滑跳转

    锚点(Anchor)相信很多人都不陌生,它方便访问者在页面的不同位置快速跳转,直接找到自己感兴趣的内容,如果说 RSS 是整个网站的摘要,那锚点就是一个页面的摘要,通常一个页面内容很多的时候,都会用锚点来定位. 但是锚点也有个问题,通常点击锚点后,页面会立即跳到目标位置,而本文介绍的方法,实现了锚点(Anchor)间平滑跳转,效果非常不错. 复制代码 代码如下: <script type="text/javascript"> // 说明 :用 Javascript 实现锚点

  • jQuery实现锚点向下平滑滚动特效示例

    jQuery实现锚点向下平滑滚动特效示例

    实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.

  • jQuery实现页面内锚点平滑跳转特效的方法总结

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实

  • 不用锚点也可以平滑滚动到页面的指定位置实现代码

    不用锚点也可以平滑滚动到页面的指定位置 复制代码 代码如下: <!DOCTYPE html> <html > <head> <meta content="text/html; charset=utf-8" /> <title>ScrollTo:平滑滚动到页面指定位置</title> <link rel="stylesheet" type="text/css" href=

  • python tkinter中的锚点(anchor)问题及处理

    python tkinter中的锚点(anchor)问题及处理

    目录 tkinter的锚点(anchor)问题 tkinter中anchor参数 几何管理方法place中anchor的含义 tkinter的锚点(anchor)问题 tkinter中anchor参数 (注意,参数的英文都是小写) 字母 方位 n 北 s 南 w 西 e 东 center 中心 nw 西北 ne 东北 sw 西南 se 东南 from tkinter import * from tkinter import messagebox as box def main_menu(): w

  • JavaScript实现页面5秒后自动跳转的方法

    这个JavaScript控制页面5秒后自动跳转的代码在很多开发中经常需要用到,感兴趣的朋友可以收藏一下! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>JavaScript控制页面5秒后自动跳转的代码</title> <script type="text/j

  • 微信小程序和H5页面间相互跳转代码实例

    这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A

  • Nuxt.js中PC与移动端间自动识别跳转

    目录 了解 问题 解决 了解 官网类网站,需要考虑seo,使用了 nuxt.js 的 ssr 开发.pc端和移动端分离了,相当于两个独立的项目,部署在同一个服务器上,绑定不同域名. 问题 需要判断当前设备,在两个端之前相互跳转. 解决 根据浏览器ua判断当前是否为移动设备: let isMobile = (ua) => { return !!ua.match(/AppleWebKit.*Mobile.*/) } 因为接触Nuxt.js时间不长,也算不上深入.按直觉来吧: 第一版:在 defaul

  • JQuery简单实现锚点链接的平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

随机推荐