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

$('.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. Vue基础指令集锦

    v-model双向绑定数据 <input type="text" v-model="msg"> {{msg}} ###v-on 事件 <div ...

  2. windows 2008r2+php5.6.28环境搭建详细过程

    安装IIS7 安装php 网站验证 安装IIS7 1.打开服务器管理器(开始-计算机-右键-管理-也可以打开),添加角色 直接下一步 勾选Web服务器(IIS),下一步,有个注意事项继续下一步(这里我 ...

  3. Python中关于函数的介绍

    一.什么是函数       当我们在日常工作中编写代码时,有没有发现这种情况,写了一套代码,却发现里面有很多段代码出现了有规律的重复,这样就不符合一个合格程序员的标准了,一个合格的程序员编写的代码最重 ...

  4. selenium2-元素管理方式及解析

    1.管理文件格式:yaml 2.Yaml里面的内容格式:   3.格式说明: baidu_input后面接上":",直接回车,然后空两格 type与value这两个key是固定 ...

  5. C语言高效编程的几招，你会了几招了？

    编写高效简洁的C 语言代码,是许多软件工程师追求的目标.本文就工作中的一些体会和经验做相关的阐述,不对的地方请各位指教. 第1 招:以空间换时间 计算机程序中最大的矛盾是空间和时间的矛盾,那么,从这个 ...

  6. 2015四川省赛 D Vertex Cover 搜索

    题意: 给出一个\(n\)个点\(m\)条边的无向图,现在要给若干个点染色,使得每条边都至少邻接一个被染色的顶点.问至少要给多少各点染色才能满足条件. 分析: 注意到题目中有一个很特殊的条件: 对于图 ...

  7. UVa 1629 DP Cake slicing

    题意: 一块n×m的蛋糕上有若干个樱桃,要求切割若干次以后,每块蛋糕上有且仅有1个樱桃.求最小的切割长度. 分析: d(u, d, l, r)表示切割矩形(u, d, l, r)所需要的最小切割长度. ...

  8. Leetcode33--->Search in Rotated Sorted Array(在旋转数组中找出给定的target值的位置)

    题目: 给定一个旋转数组,但是你不知道旋转位置,在旋转数组中找出给定target值出现的位置:你可以假设在数组中没有重复值出现 举例: (i.e., 0 1 2 4 5 6 7 might becom ...

  9. zabbix2.4升级到2.5 --考虑升级到zabbix3.0

    现在zabbix服务器,zabbix服务日志频繁出现MySQL server  has gone away,经搜索,此问题在zabbix2.5之前是zabbix的一个bug,zabbix2.5后已经修 ...

  10. hibernate与struts框架实现增删改查

    这里配置hibernate与struts不再过多赘述,配置搭建前文已经详细讲解,配置如下: hibernate.hbm.xml配置: <?xml version="1.0" ...