<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JQ滚动特效</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,li{
list-style: none;
}
.header{
height: 300px;
}
.header ul li{
float: left;
padding: 20px;
margin-right: 20px;
background-color: #FFC0CB;
}
.content div{
height: 300px;
border: 1px solid pink;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-2.1.1.js"></script>
<script type="text/javascript">
/* $(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});*/
/*锚点滚动特效function封装*/
$(function(){
$('a[href*=#],area[href*=#]').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
</script>
</head>
<body>
<div class="warpper">
<!--nav-->
<div class="header">
<ul>
<li><a href="#content1">qqqqq</a></li>
<li><a href="#content2">qqqqq</a></li>
<li><a href="#content3">qqqqq</a></li>
<li><a href="#content4">qqqqq</a></li>
<li><a href="#content5">qqqqq</a></li>
</ul>
</div>
<div class="content">
<div id="content1">
<h1>54666645646565</h1>
</div>
<div id="content2">
<h1>54666645646565</h1>
</div>
<div id="content3">
<h1>54666645646565</h1>
</div>
<div id="content4">
<h1>54666645646565</h1>
</div>
<div id="content5">
<h1>54666645646565</h1>
</div>
</div>
</div>
</body>
</html>JQ锚点动画滚动
2017-11-10
1796
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
JQ锚点动画滚动
目录
相关文章
|
2月前
|
前端开发
JavaScript
UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
72
7
7
|
5月前
|
6月前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
vue 组件封装 | s-fullpage 全屏滚动 （内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧）
141
4
4
|
6月前
|
JavaScript
|
6月前
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
Element UI【详解】el-scrollbar 滚动条组件 —— 监听滚动条的滚动，跟随页面一起滚动，获取滚动距离，隐藏水平滚动条等
1284
0
0
|
6月前
|
JavaScript
|
8月前
|
JavaScript
|
前端开发
|
前端开发
容器
|
前端开发
热门文章
最新文章
1
多中心容灾实践：如何实现真正的异地多活？
2
Canal 数据同步（应用场景） | 学习笔记
3
你用过的网站前端优化的技术有哪些？
4
Confluence 6 那些文件需要备份
5
解决LR-Controller场景下1个用户运行出错
6
[IOS]本地化
7
Visual Studio Extensions for SharePoint Services, Really Cool !
8
基于链表编写“猫吃老鼠”
9
证码识别--type1
10
2012年我的关键词
1
「全网最细 + 实战源码案例」设计模式——外观模式
95
2
《迈向绿色智能：探寻人工智能硬件可持续发展之路》
38
3
《光存储与3D存储：开启人工智能硬件存储新时代》
25
4
《解锁AI潜能：深度挖掘工程数据宝藏》
34
5
《深度解析：VAEs如何重塑数据生成与重建格局》
34
6
《AI 造梦：解锁虚拟场景与角色逼真丰富密码》
27
7
jQuery+Slick插件实现游戏人物轮播展示切换源码
21
8
网安入门之MySQL后端基础
33
9
【03】优雅草央千澈详解关于APP签名以及分发-上架完整流程-第三篇安卓APP上架华为商店后面的步骤-华为应用商店相对比较麻烦一些-华为商店安卓上架
31
10
OpenHands：能自主检索外部知识的 AI 编程工具，自动执行命令、网页浏览和生成代码等操作
57