jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)

今天朋友,没错,是上次的好基友,在用jQuery.scrollTo.js这个插件的时候总是没反应,而且在函数里console可以输出数据,这点现在仍让我很困惑,难道是scroll版本和我引用的jQUery版本不兼容?我在自己本地搭建了一个小demo也没反应,于是就借助动画写了一个可以自定义滑动的距离和速度调控的demo。供大家参考,欢迎交流更好的办法。

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <title>jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)</title>
 6   <style type="text/css">
 7         div{
 8                 width:100%;
 9                 height:2000px;
10                 border:1px solid #ddd;
11         }
12   </style>
13  </head>
14  <body>
15     <div id="d1"><a href="#" class="apply">最上面</a></div>
16     <div id="goto">最下面</div>
17   <script src="jquery-1.8.3.min.js"></script>
18   <script type="text/javascript">
19             $(‘.apply‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#goto‘).offset().top/1.2}, 2000);});
20   </script>
21  </body>
22 </html>

1.2这个位置的数值越大,滑动的距离越小。2000数值越大 ,速度越快。所以,请根据需求自行把握和调整。谢谢。

时间: 2024-11-01 17:15:14

jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)的相关文章

【转】使用jquery animate创建平滑滚动效果

这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置: $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$(

平滑滚动-锚链接

老代码了 demo1: var ss = { fixAllLinks: function() { // Get a list of all links in the page var allLinks = document.getElementsByTagName('a'); // Walk through the list for (var i=0;i<allLinks.length;i++) { var lnk = allLinks[i]; if ((lnk.href && ln

【Win10】实现 ListViewBase 平滑滚动

原文:[Win10]实现 ListViewBase 平滑滚动 首先解释下标题的 ListViewBase 是什么鬼.ListViewBase 我们可以查阅 MSDN 文档:https://msdn.microsoft.com/zh-cn/library/windows.ui.xaml.controls.listviewbase.aspx 得知,ListViewBase 是 ListView 和 GridView 的基类(ListView 和 GridView 则为常用的数据展示控件之一).而本文

如何一行jquery代码写出tab标签页(链式操作)

啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en"> <head> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } #ul{ height: 30px; margin-bottom: 10px; } #ul li { height: 30px;

【整洁之道】如何写出更整洁的代码(上)

如何写出更整洁的代码 代码整洁之道不是银弹,不会立竿见影的带来收益. 没有任何犀利的武功招式,只有一些我个人异常推崇的代码整洁之道的内功心法.它不会直接有效的提高你写代码的能力与速度,但是对于程序员的整个职业生涯必然会带来意想不到的好处. 如果你还是一个在校学生,或者是刚工作没多久的"菜鸟",那么很有必要接触一些这方面的知识的.很显然,它会帮助你更快的适应企业级开发的要求. 1. 为什么需要代码更整洁? 在考虑代码整洁的时候,我们需要明确的一个前提是,这里不讨论代码的对错. 关于什么是

利用FluidMoveBehavior制作出手机通讯录平滑的效果

最近学习Blend,原来Blend制作动画等效果非常棒.下面演示一下FluidMoveBehavior应用,利用Blend中行为中的FluidMoveBehavior制作出手机通讯录平滑的效果 1.在画布上添加一个ListBox,添加N多个<TextBlock>,如图 2.在ListBox上右键按图指示操作创建副本 3.在模板中选择ItemsPresenter, 4.然后从行为面板中选择FluidMoveBehavior拖放到画板上的ItemsPresenter对象上 5.返回到ListBox

【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】

1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 使用jQuery前必须下载并引用jQuery的js文件,下载链接为h

jquery弹出层

Ug,一个轻量级的js组件.web弹窗(层)解决方案 .网址:http://ug66.cn/ 效果预览: Ug,简洁的代码.灵活的自定义,您只需简单地调用,即可轻松实现各种弹出效果. Ug,她尽可能地以更少的代码展现出更强健的功能,让您的页面拥有更丰富与便捷的UI体验. Ug.格外注重性能的提升.易用和实用性. 鄙人必须中止“王婆卖瓜”的陈述,因为一切的不足或友好,都需阁下在使用过程中去发现. jquery弹出层,布布扣,bubuko.com

《Effective C++》item25:考虑写出一个不抛异常的swap函数

std::swap()是个很有用的函数,它可以用来交换两个变量的值,包括用户自定义的类型,只要类型支持copying操作,尤其是在STL中使用的很多,例如: int main(int argc, _TCHAR* argv[]) { int a[10] = {1,2,3,4,5,6,7,8,9,10}; vector<int> vec1(a, a + 4); vector<int> vec2(a + 5, a + 10); swap(vec1, vec2); for (int i =