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

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. Git-Notes

    1.Git安装,直接在官网下载安装即可. 2.Git配置,使用config选项,配置名字和邮箱,如下所示 C:\Users\1yyg>git config --global user.name ...

  2. 在ASP.NET MVC的Action中直接接受客户端发送过来的HTML内容片段

    出于安全的考虑,默认情况下,如果从客户端发送过来的数据中直接包括了HTML内容,ASP.NET会自动启动保护措施,你会收到下面的错误提示 这当然是一个不错的设计,只不过在某些特殊的事情,如果我们确实需 ...

  3. JavaScript使用构造函数获取变量的类型名

    在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题. 但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里 我通过 typeof ,jQuery.type 和 ...

  4. publishing failed with multiple errors resource is out of sync with the file system--转

    原文地址:http://blog.csdn.net/feng1603/article/details/7398266 今天用eclipse部署项目遇到"publishing failed w ...

  5. composer安装yii2问题总结

    今天周六,在家安装yii2的advanced版本, 过程有些坎坷, 不过最后总算安装好了. 总结一下, 主要遇到下面两个问题: 1, 下载速度慢, 主要原因是网络问题 下载yii2时, 模板(除了ve ...

  6. 【JUC】JDK1.8源码分析之ConcurrentSkipListMap(二)

    一.前言 最近在做项目的同时也在修复之前项目的一些Bug,所以忙得没有时间看源代码,今天都完成得差不多了,所以又开始源码分析之路,也着笔记录下ConcurrentSkipListMap的源码的分析过程 ...

  7. 微信扫码支付+Asp.Net MVC

    这里的扫码支付指的是PC网站上面使用微信支付,也就是官方的模式二,网站是Asp.net MVC,整理如下.(demo在最下方) 一.准备工作 使用的微信API中的统一下单方法,关键的参数是‘公众账号I ...

  8. 分享一个基于HTML5实现的视频播放器

    什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...

  9. Top 15 不起眼却有大作用的 .NET功能集

    目录 1. ObsoleteAttribute2. 设置默认值属性: DefaultValueAttribute3. DebuggerBrowsableAttribute4. ??运算符5. Curr ...

  10. struts2中错误There is no Action mapped for namespace [/] and action name [] associated with context path

    1 There is no Action mapped for namespace [/] and action name [] associated with context path [/Stru ...