之所以笔记一下这个，因为我在项目中经常用到。

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});     //页面滚动至顶部

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});    //页面滚动至指定的位置

$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});   //页面滚动到底部

js-点击按钮页面滚动到顶部，底部，指定位置的更多相关文章

  1. jQuery-点击按钮页面滚动到顶部，底部，指定位置

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); //页面滚动至顶部 $('. ...

  2. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

  3. html网页中 点击按钮页面跳转

    在html页面中 实现点击按钮页面跳转.语句如下: <input type="button" value="跳转" onClick="windo ...

  4. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  5. [jquery]判断页面滚动到顶部和底部（适用于手机web加载）

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  6. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  7. js和jquery实现页面滚动监听

    js和jquery实现页面滚动监听 一.总结 一句话总结:onscroll方法和监听页面元素的高度都可以实现滚动监听. 1.onscroll方法实现滚动监听的核心代码是什么? <body ons ...

  8. js开启和关闭页面滚动【亲测有效】

    在移动端的页面开发过程中,经常会遇到点击弹框禁止页面滚动的情景,下面就来说下具体的做法... 第一步:构建一个函数 function bodyScroll(event){ event.preventD ...

  9. 使用JavascriptExecutor将页面滚动到最底部

    使用如下代码,将页面滚动到最底部 @Test(enabled = true) public void scroll(){ String jsStr="window.scrollTo(0,do ...

随机推荐

  1. Hessian知识学习总结（二）——Hessian的helloworld

    一.下载Hessian 可在hessian官网http://hessian.caucho.com/ 或者http://download.csdn.net/detail/wodediqizhang/95 ...

  2. matplotlib学习记录 三

    # 绘制自己和朋友在各个年龄的女友数量的折线图 from matplotlib import pyplot as plt # 让matplotlib能够显示中文 plt.rcParams['font. ...

  3. 运用Python制作你心目中的完美女神脸！

    简介 写这个项目的本来目的是通过构建一个神经网络来训练人脸图片,最后达到能根据图片自动判断美丑的效果.可能是因为数据集过小,或者自己参数一直没有调正确,无论我用人脸关键点训练还是卷积神经网络训练,最后 ...

  4. type和object

    一.定义 1.object是所有新式类的父类 2.type是所有类的类    二.解析   下面通过代码来比较一下object和type的关系(__class__获取所属的类,__bases__获取父 ...

  5. 线段树： CDOJ1598-加帕里公园的friends（区间合并，单点更新）

    加帕里公园的friends Time Limit: 3000/1000MS (Java/Others) Memory Limit: 131072/131072KB (Java/Others) 我还有很 ...

  6. Linux学习-使用传统程序语言进行编译的简单范例

    单一程序:印出 HelloWorld 编辑程序代码,亦即原始码 [root@study ~]# vim hello.c <==用 C 语言写的程序扩展名建议用 .c #include <s ...

  7. HBase0.94.2-cdh4.2.0需求评估测试报告1.0之二

    Hbase 配置文件: hbase-site.xml <configuration> <property> <name>hbase.cluster.distribu ...

  8. CornerStone使用教程（配置SVN，HTTP及svn简单使用）

    1.SVN配置 假设你公司svn地址为:svn://192.168.1.111/svn/ios,用户名:svnserver,密码:123456 1:填写主机地址 2:如果你的主机地址中有端口号,如为1 ...

  9. ogre3D学习基础8 --- 资源管理器

    资源管理 可管理的资源有: 材质资源:在.material文件中包含的材质脚本定义(技术.通路.纹理单元等数据的定义). 模型资源:经过优化的二进制网格模型文件,扩展名为.mesh.包含几何信息和一些 ...

  10. [Cake] 2. dotnet 全局工具 cake

    在上篇博客[Cake] 1. CI中的Cake中介绍了如何在CI中利用Cake来保持与CI/CD环境的解耦. 1. 简化cake的安装 当时dotnet 2.1还未正式发布,dotnet 还没有工具的 ...