jQuery快速滚动到页面顶部


jQuery快速滚动到页面顶部

使用animate+scrollTop即可实现

$('html,body').animate({scrollTop: '0px'}, 500)

animate是jq的一个特效的函数方法,animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。

(相关课程推荐:jQuery教程

CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。

字符串值无法创建动画(比如 "background-color:red")。

上面的代码表示滚动条跳到0的位置,页面移动速度是500。

结合scrollTop实用示例:

jQuery(document).ready(function($){
 $('#shang').click(function(){
      $('html,body').animate({scrollTop: '0px'}, 500);
 });
 $('#comt').click(function(){
      $('html,body').animate({scrollTop:$('#comments').offset().top}, 500);
 });
 $('#xia').click(function(){
      $('html,body').animate({scrollTop:$('#footer').offset().top}, 500);
 });
});

表示点击相关ID移动到指定位置:

点击ID为shang的元素,回到顶部;

点击ID为comt的元素,回到ID为comments的位置;

点击ID为xia的元素,回到底部;

Image placeholder
前端答疑
未设置
  46人点赞

没有讨论,发表一下自己的看法吧

推荐文章
为什么react比jquery快

为什么react比jquery快因为react采用了虚拟dom,传统的dom操作成本太高,耗费性能。而react的虚拟dom是当数据发生改变时,执行diff算法,以最小的成本渲染dom,所以性能会更好

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery判断是否出现滚动条?

jquery判断是否出现滚动条?一、判断可视区域是否超过实际高度,超过一定存在if($(window).height()=document.body.clientHeight){ alert("页面无

jquery怎么确定滚动事件的方向?

在jQuery中可以使用scrollTop()方法来确定滚动事件的方向,scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法,我们就可以确定滚动方向。下面通过示例来具体看看。

css如何让元素不随滚动条滚动?

在CSS中,可以使用固定定位(position:fixed;)来固定元素的位置,让元素不随滚动条滚动。fixed生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮在文档流的上方,相对

jq的$.when().done()的使用, 同时调用多个ajax 渲染到页面html上

推荐课程:Java开发工程师--学习猿地--送七个上线商业项目 原因:接口返回不全,或者后续维护不了的接口无法返回全,才让写多个 留给自己看的,但是IE有兼容问题,还在看 参考: 阮一峰的jQuer

jquer如何判断是否有滚动条?

利用jQueryscrollTop()来控制滚动条滚动,再判断滚动条是否有偏移。如果有,则存在滚动条,相反没有滚动就不存在。 $(function(){ $("body").scrollTop(10)

jquery判断页面是否加载完成?

jquery判断页面是否加载完成?1、使用$(document).ready()$(document).ready(function(){ alert('dom加载完成'); });2、简写方式(推荐

jQuery怎么跳转页面?

jQuery怎么跳转页面?1、使用Jquery来写JS脚本代码,所以需要在页面里先引入脚本库文件。2、html很简单,一个按钮,用来触发跳转的,并且注意的是当前页面是叫‘页面A’的。3、然后编写JS脚

jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

课程推荐:Java开发工程师--学习猿地精品课程 jQuery插件实现瀑布留布局masonry+infinitescroll。使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题

使用 jQuery 触发 Vue 事件

时间一长老是忘记这行代码的写法,今天特地记上一笔,方便今后查阅 js文件如下document.save.dispatchEvent(newEvent('无此事件'))//触发不存在的事件不会报错 do

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

vue与jquery的区别是什么?

vue与jquery的区别是什么?vue和jquey的对比:jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DO

vue能用jQuery吗?

课程推荐:前端开发工程师--学习猿地精品课程 Vue项目里使用jQuery是完全可行的,而且完全符合Vue的工作思想,本质上,将jQ视为一个对Vue适配度不高的Vue插件就行了,双向绑定工作需要你自己

vue能用jQuery吗?

课程推荐:Java开发工程师--学习猿地精品课程 Vue项目里使用jQuery是完全可行的,而且完全符合Vue的工作思想,本质上,将jQ视为一个对Vue适配度不高的Vue插件就行了,双向绑定工作需要你

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

jquery ajaxError()方法怎么用?

jqueryajaxError()方法怎么用?ajaxError()方法规定AJAX请求失败时运行的函数。注意:自jQuery版本1.8起,该方法只被附加到文档。语法:$(document).ajax

jquery中deferred对象是什么?

jquery中deferred对象是什么?Deferred是JQuery的一个延迟对象,意思是函数延迟到某个点才开始执行,改变执行状态的方法有两个(成功:resolve和失败:reject),分别对应

jQuery LigerUI是什么?

jQueryLigerUI是什么?LigerUI是基于jQuery的UI框架,其核心设计目标是快速开发、使用简单、功能强大、轻量级、易扩展。简单而又强大,致力于快速打造Web前端界面解决方案,可以应用

jquery serialize()中文乱码

jqueryform表单.serialize()序列化后中文乱码问题原因及解决原因:.serialize()自动调用了encodeURIComponent方法将数据编码了解决方法:调用decodeUR

jquery中slider是什么?

slider(滑块)是jqueryUI中的一个小插件。jQueryUI滑块(Slider)插件允许通过滑块进行选择。有各种不同的选项,比如多个手柄和范围。手柄可通过鼠标或箭头按键进行移动。滑块部件(S

jquery序列化serialize()方法时中文乱码怎么解决?

原因:.serialize()自动调用了encodeURIComponent方法将数据编码了解决方法:调用decodeURIComponent(XXX,true);将数据解码如:varparams=j

jQuery 学习笔记

jQuery中的dom追加操作方法(主动/被动、前面/后面、里面/外面): append:主动/后面/里面 appendTo:被动/后面/里面 prepend:主动/前面/里面 prependTo:被