文档章节

用jQuery的animate()实现平滑滚动

issac宝华
 issac宝华
发布于 2016/03/18 21:01
字数 166
阅读 69
收藏 3

HTML:

<button>平滑滚动</button>
<div style="width: 400px; height: 200px;background-color: red;margin-top: 700px;"></div>

 

JS:

<script>
    //获取节点对象
    $("button").click(function(){
        var valOfScroll =$("div").offset().top;
        //让滚轴从当前位置的scroll在600毫秒内偏移到位置为valOfScroll。
        $("html,body").animate({scrollTop: valOfScroll}, 600)
    });
</script>

 

另外:

经常还会做“回到顶部”和 “到底部”的功能

回到顶部只需要让当前的scrollTop渐变到srollTop=0;

到底部则是有得一说,获取底部的scrollTop:var bottom =document.body.scrollHeight;

另外一个更简单的办法是,获取在底部的元素的scrollTop。

 

© 著作权归作者所有

issac宝华
粉丝 9
博文 140
码字总数 34397
作品 0
珠海
私信 提问
14 个比较独特的 jQuery 插件

默认情况下,标准的HTML元素是非常恼人的,它很丑陋。经常有人问我如何创建一个漂亮的表单,而不是浏览器默认的外观,网上充斥大量此类的教程和介绍,但很容易让人迷失其中。但如果我们使用一...

oschina
2012/06/10
10.5K
11
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
10+ 方便实用的jQuery代码

由chenglin博客整理发表,原文链接:http://www.chenglin.name/web/js-web/405.html 这里将为大家介绍十几个方便实用的jquery代码,大多简单上手,欢迎大家交流 平滑滚动到页面顶部 我们以一...

Cleey
2014/02/17
335
0
js:滚动页面时自动激活对应菜单中的条目

这个在Change Active Menu Item on Page Scroll?有详细的讨论。对应的代码在http://jsfiddle.net/mekwall/up4nu/。 下面是代码,我做了些小的改动。 效果如下: firebug控制台输出如下: jq...

樂天
2015/11/20
90
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部