效果请看右下角:代码如下:

<div class="totop">
<img src="https://www.cnblogs.com/images/cnblogs_com/aiwuxia/1249780/o_replay_tophover.jpg" alt="">
</div>
<script>


var topMain=$(".head").height()
$(window).scroll(function(){


if ($(window).scrollTop()>topMain){
$(".totop").slideDown(500);
}
else{
$(".totop").slideUp(500);
}
});
$(".totop").click(function(){$("body,html").animate({scrollTop:0},500)});
</script>

 

jqury点击返回顶部代码的更多相关文章

  1. qq空间返回顶部代码

    点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. css 简单 返回顶部 代码及注释说明

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

  3. vue点击返回顶部插件vue-totop

    vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...

  4. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  5. jQuery-点击返回顶部

    在页面上,有时需要点击某个图标钮实现返回顶部的效果. 实现方式如下,给图标按钮增加名叫goTop-hook的类. // 点击返回顶部 $(window).scroll(function() { if ...

  6. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  7. [html][转]常用返回顶部代码

    转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...

  8. 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQ 移动端返回顶部代码整理

    //返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...

随机推荐

  1. Linux下查看磁盘剩余空间和文件夹大小

    1. du -sh 查看当前文件夹大小 2. du -sh * | sort -n 列出当前文件夹下的所有文件夹及其大小,并按照文件夹大小排序 du - sh *  //查看当前文件夹下所有文件的大小 ...

  2. sublime text 3 的emmet 添加自定义 html 片段

    比如想在html写 jquery 直接添加jquery地址,打开 ‘首选项->Package Setting->Emmet->Settings - User’, css也可以如法炮制 ...

  3. Centos下安装pip失败或新装

    Centos安装pip失败: [root@localhost /]# yum -y install pip已加载插件:fastestmirrorRepodata is over 2 weeks old ...

  4. 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目

    1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...

  5. MiniProfiler NET Core

    MiniProfiler 来分析 ASP.NET Core 应用 它会把结果直接放在页面的左下角,随时可以点击查看:这样的话就可以感知出你的程序运行的怎么样:同时这也意味着,在你开发新功能的同时,可以 ...

  6. devOps开发(Web API 实例)dotnet core 和 Azure PaaS服务

    使用 dotnet core 和 Azure PaaS服务进行devOps开发(Web API 实例) 作者:陈希章 发表于 2017年12月19日 引子 这一篇文章将用一个完整的实例,给大家介绍如何 ...

  7. scau 18087 开始我是拒接的 mobius

    其实有一个很有用的技巧就是,把gcd = 4的贡献,压去gcd = 2时的贡献,就不需要考虑这么多的了. 为什么可以把gcd = 4的,压去gcd = 2的呢,gcd = 12的,压去gcd = 6的 ...

  8. openstack安装newton版本keyston部署(一)

    一.部署环境:     两台centos7,  内存2G 控制计算节点: Hostname1:                    ip:172.22.0.218 计算节点及存储节点 Hostnam ...

  9. c#基础 base和this的区别,在继承上面

    base public Person(string name, int age, char gender) { this.Name = name; this.Age = age; this.Gende ...

  10. IO流----转换流、缓冲流

    打开一个文本文件,另存为: Ansi就是系统默认编码(就是gbk) 建一个编码是utf-8的txt文件, 例: import java.io.FileWriter; import java.io.IO ...