点击返回顶部按钮,页面滑动形式回到顶部!

HTML代码:

<div id="ctop">回到<br>顶部</div>

CSS代码:

#ctop{width:45px; height:45px; position: fixed; left:50%; bottom:120px; border:solid 1px #ccc; background: #fff; margin-left: 600px; text-align: center; line-height: 22px;cursor: pointer; display: none;font-size: 12px; color: #999}

JavaScript代码:

//点击回到顶部

  $("#ctop").click(function(){
        $("html,body").animate({scrollTop:'0px'},300)
  })
//判断元素在网页下滑多少像素时显示
      $(window).bind('scroll',function(){
          var len=$(this).scrollTop()
          if(len>=500){
               $('#ctop').fadeIn(500);
          }else{
               $('#ctop').fadeOut(200);
          }
      });

网页返回顶部之animate方法的更多相关文章

  1. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  2. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  3. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  4. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  5. js常用返回网页顶部几种方法

    一.使用锚标记 此方法最简单,只需在body下放个隐藏的锚点标记,内容如下:  代码如下 复制代码 <a name="top" id="top">& ...

  6. js网页返回页面顶部的小方法

    咳咳,在网页出现滚动条的时候,许多网站会在右下角出现一个图标,点击可以回到页面顶部 本文就记录下js实现代码: 1.在html页面body添加dom元素 <img src="toTop ...

  7. zepto的返回顶部scrollTop的动画解决方法

    写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...

  8. jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点. 方法一 锚点定位 ? 1 <a href="#" class ...

  9. layui topbar图标(即返回顶部)未显示的解决方法

    在自己搭建纯html模板的时候,遇到了topbar无法显示的问题,搜了社区都没啥有用的解决方法,于是引用了util.js的源文件,发现用dom变量未获取到正确的scrollTop值,经过反复测试,把这 ...

随机推荐

  1. ImageView设置边框的两种方式

    转载:http://www.2cto.com/kf/201308/239945.html package cc.testimageviewbounds; import android.os.Bundl ...

  2. 支持向量机原理(四)SMO算法原理

    支持向量机原理(一) 线性支持向量机 支持向量机原理(二) 线性支持向量机的软间隔最大化模型 支持向量机原理(三)线性不可分支持向量机与核函数 支持向量机原理(四)SMO算法原理 支持向量机原理(五) ...

  3. Git版本控制Windows版快速上手

    说到版本控制,之前用过VSS,SVN,Git接触不久,感觉用着还行.写篇博文给大家分享一下使用Git的小经验,让大家对Git快速上手. 说白了Git就是一个控制版本的工具,其实没想象中的那么复杂,咱在 ...

  4. 延时调用--deferred.js原码分析

    有些时候,我们需要等待上一个操作完成之后,才能进行下一步的操作.比如Ajax实现自动提交表单操作的时候,程序需要等待,一旦有返回结果了,则继续进行一下步操作. 这时deferred.js这个库就产生了 ...

  5. win7系统下如何配置php-Apache-mysql环境

    如何在win7系统下配置php环境呢,php+Apache+mysql都是在配置过程中必不可少的元素,php负责解析php代码,apache负责服务器端而mysql是数据交互的中转站. 那么如何将ph ...

  6. Pointer is missing a nullability type specifier (__nonnull or __nullable)

    我们都知道在swift中,可以使用!和?来表示一个对象是optional的还是non-optional,如view?和view!.而在Objective-C中则没有这一区分,view即可表示这个对象是 ...

  7. hibernate笔记--基于外键的单(双)向的一对一映射关系

    假设我们有两张表,人员信息表Person,和身份信息表IdCard,我们知道每个人只有一个身份证号,所以这里的Person和IdCard表是一一对应的,也就是一对一的映射关系,基于外键的单向一对一映射 ...

  8. 对于Fragment的一些理解

    前言 Fragment想必大家不陌生吧,在日常开发中,对于Fragment的使用也很频繁,现在主流的APP中,基本的架构也都是一个主页,然后每个Tab项用Fragment做布局,不同选项做切换,使用起 ...

  9. DirectShow+VS2010+Win7配置说明

    不得不说,使用windows的东西确实很麻烦,DirectShow这个东西不断更新换代,书本上的知识完全跟不上时代,只能去博客上查资料.百度之后,看了大量的文章,终于完成了自己的DirectShow安 ...

  10. Nancy之ModelBinding(模型绑定)

    过年前的最后一篇博客,决定留给Nancy中的ModelBinding 还是同样的,我们与MVC结合起来,方便理解和对照 先来看看MVC中简单的ModelBinding吧 // POST: Author ...