test.js
// 说明 ：用 Javascript 实现锚点(Anchor)间平滑跳转
// 来源 ：ThickBox 2.1
// 整理 ：Yanfu Xie [xieyanfu@yahoo.com.cn]
// 网址 ：http://www.codebit.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);
}
关键函数
scroller(el, duration)
el : 目标锚点 ID
duration : 持续时间，以毫秒为单位，越小越快
test.html
<!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" />
<title>test</title>
<script type="text/javascript" src="test.js"></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>
</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>
分享到：
相关推荐
2. 实现锚点跳转的方式：主要通过a标签配合name或href属性，以及元素的id属性实现。 3. URL中“#”的使用：标识链接指向页面中的某个位置。 4. Jquery的animate()方法：实现平滑滚动到指定位置的效果。 5. 解决特定...
1. jQuery插件：有许多现成的jQuery插件如` waypoints.js `或` scrollmagic.js `可以帮助实现锚点动画。它们监听滚动事件，当特定元素进入视口时触发动画。 2. 自定义JavaScript：如果你不依赖外部库，可以手动监听...
JavaScript 实现锚点是一种常见的网页交互技术，它允许用户点击页面上的链接，快速跳转到同一页面的特定位置。在网页开发中，锚点通常用于长页面的导航，让用户能够轻松地访问页面内的各个部分。这篇文章将深入探讨...
用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动。
综上所述，JS锚点平滑跳转通过JavaScript和CSS3技术实现了比传统HTML锚点更友好的用户体验。它不仅提供了平滑的滚动效果，还能与其他前端技术结合，为网页增添更多动态和交互性。在实际开发中，开发者可以根据项目...
总结，Vue.js 实现锚点定位功能结合了 HTML、CSS 和 JavaScript 三者的力量，通过监听滚动事件，动态更新视图状态，以及使用平滑滚动技术，提供了一种优雅的页面导航体验。在实际开发中，开发者还应关注性能优化，...
在没有JavaScript的情况下，我们可以使用HTML的`<a>`标签配合`name`或`id`属性来实现锚点链接，例如： ```html 第一部分 ... 跳转到第一部分 ``` 当用户点击“跳转到第一部分”的链接时，浏览器会滚动到页面上`...
#### 使用JavaScript实现锚点定位 除了传统的HTML方式外，我们还可以利用JavaScript来动态地控制锚点定位。这通常涉及到对`window.location.hash`属性的操作。`window.location.hash`可以获取当前URL中的锚点部分...
在微信小程序开发中，实现页面内的锚点效果可以让用户快速定位到页面的特定区域，提升用户体验。本教程将深入探讨如何在微信小程序中简洁高效地实现这一功能。 首先，我们需要理解锚点的基本原理。在HTML中，锚点是...
以下是实现锚点功能的关键步骤： 1. **页面结构设计**：在小程序的`.wxml`文件中，为需要定位的每个部分设置唯一的`id`，如`段落1</view>`。 2. **事件监听**：在`.json`配置文件中，定义页面的生命周期函数，如`...
要实现锚点功能，可以在 `router/index.js` 文件中进行配置。首先，确保你的路由配置中包含目标组件的路径，例如： ```javascript { path: '/my-page', component: MyPageComponent, props: route => ({ anchor:...
"js导航栏A标签锚点跳转"是JavaScript在网页交互中的常见应用，主要用于实现页面内部链接的平滑滚动效果。这个话题涉及到的知识点包括HTML锚点、JavaScript事件处理和DOM操作。 首先，HTML锚点（#标识符）允许我们...
在网页中，我们使用`<a>`标签配合`id`属性来实现锚点，但在微信小程序中，由于没有直接对应的API或组件，我们需要通过其他方式来模拟这一功能。以下将详细介绍如何在微信小程序中实现类似锚点功能。 1. **页面结构...
JavaScript实现锚点间的平滑跳转是一种增强用户体验的技术，它避免了传统锚点直接跳转带来的瞬间移动感，使得页面过渡更加流畅。在网页设计中，锚点常用于长页面内容的分段，用户可以通过点击不同的链接直接到达页面...
综上所述，"外卖：实现类似锚点功能"的项目主要涉及HTML、CSS、JavaScript等前端技术，目的是提升用户在浏览长页面时的导航体验，特别是对于包含众多菜品的外卖商城，锚点功能可以使用户更高效地找到目标菜品，提升...
jQuery作为一个广泛使用的JavaScript库，提供了方便快捷的方法来实现这些功能。本教程将详细讲解如何使用jQuery实现网页锚点定位和平滑滚动，以及创建响应式的导航菜单。 首先，我们要理解锚点定位的基本原理。在...
3. **处理跳转逻辑**：在目标页面的`onLoad`或`onShow`生命周期方法中，可以监听页面参数的变化，从而实现锚点定位。由于微信小程序不直接支持页面滚动到锚点位置，所以需要手动调整`scroll-view`或`page`的`...