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

$('.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. sphinx增量索引使用

    sphinx在使用过程中如果表的数据量很大,新增加的内容在sphinx索引没有重建之前都是搜索不到的. 这时可以通过建立sphinx增量索引,通过定时更新增量索引,合并主索引的方式,来实现伪实时更新. ...

  2. IIS7.0/8.0的错误HTTP Error 500.19 - Internal Server Error ，错误代码为0x80070021

    最近在部署项目的时候,总是出现了这个问题. 大概原因为IIS7.0的安全设定相比前版本有很大的变更.IIS7.0的安全设置文件在%windir%\system32\inetsrv \config\ap ...

  3. GoF23种设计模式之行为型模式之模板方法

    概述 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 适用性 1.一次性实现一个算法的不变的部分, ...

  4. IDEA入门学习笔记1：资料收集

    IDEA2018软件下载 :https://mp.weixin.qq.com/s?__biz=MzIwMjE1MjMyMw==&mid=2650200056&idx=1&sn= ...

  5. C++智能指针实现

    #include <iostream> #include <string> #define unsigned int size_t using namespace std; / ...

  6. 如何理解redo和undo的作用

    目录 如何理解redo和undo的作用 redo undo UNDO和REDO的区别 如何理解redo和undo的作用 redo 重做日志(redo)包含所有数据产生的历史改变记录,是oracle在线 ...

  7. webdriver高级应用- 测试过程中发生异常或断言失败时进行屏幕截图

    封装了三个类来实现这个功能: 1.DataUtil.py 用于获取当前的日期以及时间,用于生成保存截图文件的目录名,代码如下: #encoding=utf-8 import time from dat ...

  8. webdriver高级应用- 右键另存为下载文件

    1.要使用右键另存,需要先按照第三方工具AutoIt: 链接: https://pan.baidu.com/s/12aBBhOOTmyQpH9hukt0XGA 密码: fcdk 2.创建一个名为loa ...

  9. 06-python进阶-多线程下载器练手

    我们需要用python 写一个多线程的下载器 我们要先获取这个文件的大小 然后将其分片 然后启动多线程 分别去下载 然后将其拼接起来 #!/usr/bin/env python#coding:utf- ...

  10. bootstrap3兼容ie8浏览器

    bootstrap3 兼容IE8浏览器 2016-01-22 14:01 442人阅读 评论(0) 收藏 举报  分类: html5(18)    目录(?)[+]   近期在使用bootstrap这 ...