利用jquery实现页面可视区滚动到指定位置。直接上代码

//滚动到指定位置
function scrollTo(element,speed) {
if(!speed){
speed = 300;
}
if(!element){
$("html,body").animate({scrollTop:0},speed);
}else{
if(element.length>0){
$("html,body").animate({scrollTop:$(element).offset().top-200},speed);
}
}
} //然后触发某个事件时调用这个函数。
//scrollTo('#comment',300); 写评论功能的时候,滚动到文本域的位置。#comment是文本域ID属性。

offset() 返回或设置匹配元素相对于文档的偏移。上述代码中  -200  的意思是是文本域再向下移动200px,实现此功能主要是scrollTop配合animate动画。

//回答顶部
$('html,body').animate({scrollTop: 0},500); //距离body顶部为0,scrollTop

参考:scrollTop讲解

$("html,body")是什么意思呢?暂时没明白。

jquery滚动到指定位置的更多相关文章

  1. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  2. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  3. 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

    double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

  4. 通过scrollTop,使子元素滚动至指定位置

    想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

  5. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  6. ios开发之--令UITableView滚动到指定位置

    这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...

  7. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  8. js 获取滚动位置,滚动到指定位置,平滑滚动

    1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

  9. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

随机推荐

  1. .Net Core Grpc Consul 实现服务注册 服务发现 负载均衡

    本文是基于..net core grpc consul 实现服务注册 服务发现 负载均衡(二)的,很多内容是直接复制过来的,..net core grpc consul 实现服务注册 服务发现 负载均 ...

  2. C++学习 之 类的继承中的虚函数(笔记)

    1.多态行为 多态是面向对象语言的一种特征,让我们能够以类似的方式处理不同类型的对象.在C++中我们可以通过继承层次结构实现子类型多态. 我们可以通过下面的代码进一步了解多态: #include< ...

  3. 坦克大战--Java类型 ---- (3)实现socket通信

    一.实现思路 使用socket通信的一些方法来实现socket通信,客户端和服务端两边需要约定好通信的接口Port(尽量选高的),客户端需要服务端的IP地址,以实现数据交流. 同时,客户端和服务端需要 ...

  4. centos7安装activemq5.15

    1. 官网下载 http://activemq.apache.org/components/classic/download/ 上传到服务器 2. 安装 tar zxf apache-activemq ...

  5. PHP 根据整数ID,生成唯一字符串

    //根据ID计算唯一邀请码 public static function createCode($Id){ static $sourceString = [ 0,1,2,3,4,5,6,7,8,9,1 ...

  6. MyISAM与InnoDB的索引差异

    数据库的索引分为主键索引(Primary Index)与普通索引(Secondary Index).InnoDB和MyISAM是怎么利用B+树来实现这两类索引的,又有什么差异呢?一.MyISAM的索引 ...

  7. QThread::wait(),一直以来我以为它阻塞的是QThread对象,可是我现在明白,原来阻塞的是这个对象所在的线程(通常是主线程)——所有事情源于 QThread 的事件循环——如果使用继承QThread这一方法,QThread::quit()没有效果,因为这个线程根本就不需要事件循环

    近日,使用QThread,一些问题百思不得其解,看过大牛的文章,恍然大悟啊. 原文 http://hi.baidu.com/dbzhang800/item/c14c97dd15318d17e1f46f ...

  8. 最新省市区地区数据sql版本(2019年1月)

    版本 统计标准2017版 来源 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/ 建表 CREATE TABLE `area` ( `id` varc ...

  9. (转载)sublime3安装markdown插件

    原文链接 http://www.jianshu.com/p/335b7d1be39e?utm_source=tuicool&utm_medium=referral 最近升级到了 Sublime ...

  10. <input> disabled 属性

    定义和用法 disabled 属性规定应该禁用输入字段. 被禁用的输入字段是无法使用和无法点击的. 如果使用该属性,则会禁用输入字段. 可以对 disabled 属性进行设置,使用户在满足某些条件时( ...