jqury点击返回顶部代码
效果请看右下角:代码如下:
<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点击返回顶部代码的更多相关文章
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- css 简单 返回顶部 代码及注释说明
1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...
- vue点击返回顶部插件vue-totop
vue-totop vue 点击返回顶部插件,可以根据参数设定按钮大小,颜色,类型,返回顶部的时间等.github地址:https://github.com/1006008051/vue-totop, ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- jQuery-点击返回顶部
在页面上,有时需要点击某个图标钮实现返回顶部的效果. 实现方式如下,给图标按钮增加名叫goTop-hook的类. // 点击返回顶部 $(window).scroll(function() { if ...
- js中点击返回顶部
window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }
- [html][转]常用返回顶部代码
转至:http://jingyan.baidu.com/article/7082dc1ca6b928e40a89bd1a.html 一.使用HTML的锚标记最简单了 但是唯一的缺点就是样式不怎么样,会 ...
- 在页面中有overflow-y:auto属性的div,当出现滚动条,点击返回顶部按钮,内容回这个div最顶部
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQ 移动端返回顶部代码整理
//返回顶部 $('#btn-scroll').on('touchend',function(){ var T = $(window).scrollTop(); var t = setInterval ...
随机推荐
- Linux下查看磁盘剩余空间和文件夹大小
1. du -sh 查看当前文件夹大小 2. du -sh * | sort -n 列出当前文件夹下的所有文件夹及其大小,并按照文件夹大小排序 du - sh * //查看当前文件夹下所有文件的大小 ...
- sublime text 3 的emmet 添加自定义 html 片段
比如想在html写 jquery 直接添加jquery地址,打开 ‘首选项->Package Setting->Emmet->Settings - User’, css也可以如法炮制 ...
- Centos下安装pip失败或新装
Centos安装pip失败: [root@localhost /]# yum -y install pip已加载插件:fastestmirrorRepodata is over 2 weeks old ...
- 【VueJS】windows环境安装vue-cli及webpack并创建VueJS项目
1. 安装node.js, Node.js安装包及源码下载地址为:https://nodejs.org/en/download/. 这次node.js不是主角,默认已安装好了,通过npm –v查看no ...
- MiniProfiler NET Core
MiniProfiler 来分析 ASP.NET Core 应用 它会把结果直接放在页面的左下角,随时可以点击查看:这样的话就可以感知出你的程序运行的怎么样:同时这也意味着,在你开发新功能的同时,可以 ...
- devOps开发(Web API 实例)dotnet core 和 Azure PaaS服务
使用 dotnet core 和 Azure PaaS服务进行devOps开发(Web API 实例) 作者:陈希章 发表于 2017年12月19日 引子 这一篇文章将用一个完整的实例,给大家介绍如何 ...
- scau 18087 开始我是拒接的 mobius
其实有一个很有用的技巧就是,把gcd = 4的贡献,压去gcd = 2时的贡献,就不需要考虑这么多的了. 为什么可以把gcd = 4的,压去gcd = 2的呢,gcd = 12的,压去gcd = 6的 ...
- openstack安装newton版本keyston部署(一)
一.部署环境: 两台centos7, 内存2G 控制计算节点: Hostname1: ip:172.22.0.218 计算节点及存储节点 Hostnam ...
- c#基础 base和this的区别,在继承上面
base public Person(string name, int age, char gender) { this.Name = name; this.Age = age; this.Gende ...
- IO流----转换流、缓冲流
打开一个文本文件,另存为: Ansi就是系统默认编码(就是gbk) 建一个编码是utf-8的txt文件, 例: import java.io.FileWriter; import java.io.IO ...