jquery实现点击回到顶部以及定点滚动

1、思路

DOM的每个标签以及浏览器本身都有一个scrollTop属性,这不是CSS可以控制的(目前),这个值指的是在一个指定的容器内当前可视顶部距离内容顶部的距离,如果这个容器是浏览器的话,那么滚动条的上边距就是这个值。

那么,如果想要回到顶部的话,设置scrollTop的值为0即可,滚动到指定位置也可以设置这个值为指定的数值。

设置scrollTop为0:

$(window).scrollTop(0);

设置scrollTop为指定数值:

var T=200;//这个是number类型,不需要带px

$(window).scrollTop(T);

 2、方法

如1设置的话,浏览器会在瞬间改变滚动条的位置,没有滚动的效果。如果要滚动的话,我们就需要慢慢的改变scrollTop的值就好。那么如何来做呢?

依照上面的经验,我们可能这么写:

var T=$(window).scrollTop();
var t=setInterval(function()
{
 if(T==0)
 {
  clearInterval(t);
 }
 else
 {
  T-=10;
  $(window).scrollTop(T);
 }
},10);

这么写,完全没有错误,把设置为固定值,就可以定点滚动了。这个例子里写的是匀速滚动,当然如果为了效果好,你可以修改下T值的变动情况,使之成为变减速运动。

有没有更好的办法来简化这个过程呢?我们知道,jQuery的animation是非常著名的,可以把这个运动放在animate里来执行呢?答案是肯定的:

$(document.body).animate({'scrollTop':0},1000);

通过阅读animate的API知道,animate的其中两个参数为属性和时间(如上代码),其中属性是这么描述的“An object of CSS properties and values that the animation will move toward.”(参考:http://api.jquery.com/animate/),意思指的是对象的css属性和值。但我们从第一点就知道,scrollTop并不是一个css属性,这又作如何解释呢?

可以解释的是,animate的第一个参数包括的不仅仅是CSS,它涵盖了所有可以用数值来表示的window属性值(scrollTop、scrollLeft)以及dom的CSS属性值(width、top、margin-left)。

时间: 2024-08-01 13:48:51

jquery实现点击回到顶部以及定点滚动的相关文章

jquery实现的动态回到顶部特效代码_jquery

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

jquery实现跳到底部,回到顶部效果的简单实例(类似锚)_jquery

实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

Android scrollToTop实现点击回到顶部(兼容PullTorefreshScrollview)

前言 最近因为项目组需求,特研究了一下"回到顶部"效果,即:页面里有scrollview,内容很多,当滑动到页面下面或者更深时,需要回到顶部,即可点击出现的按钮,省得回滑N久.我没有搜,或许网上有很多这样的例子,此文写的不好的地方,望指点. 效果图如下 实现方法 初一看是不是觉得很简答?没错,当时我也是这样想的页面内容很长,就弄个scrollview,回到顶部按钮需要固定在右下角,故大概的布局代码: <?xml version="1.0" encoding=&

基于jquery实现点击左右按钮图片横向滚动_jquery

点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

Jquery实现点击页面回到顶部_jquery

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid

jQuery回到顶部的代码_jquery

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果.感兴趣的朋友跟着小编一起看下实现代码吧. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top">

jQuery实现带有动画效果的回到顶部和底部代码_jquery

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

jQuery实现分章节锚点“回到顶部”动画特效代码_jquery

本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

Android悬浮按钮点击返回顶部FloatingActionButton

先看一下Android悬浮按钮点击回到顶部的效果: FloatingActionButton是Design Support库中提供的一个控件,这个控件可以轻松实现悬浮按钮的效果 首先,要在项目中使用这个悬浮按钮就要先把design这个包导入项目 gradle中加入依赖 compile 'com.android.support:design:25.0.0' 接下来就是在xml中使用: 我这里是放置一个listView模拟返回顶部 <?xml version="1.0" encodi