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 ...
随机推荐
- 洛谷P2285 [HNOI2004]打鼹鼠
P2285 [HNOI2004]打鼹鼠 题目描述 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿牛编写了一个打鼹鼠的游戏:在一个n*n的网格中,在某 ...
- Bootstrap 栅栏布局中 col-xs-*、col-sm-*、col-md-*、col-lg-* 区别及使用方法
(1)概括 一句话概括:根据显示屏幕宽度的大小,自动的选用对应的类的样式. (2)关键字段 1.col是column简写:列: 2.xs是maxsmall简写:超小, ...
- Python多继承C3算法
Python3 多继承的MRO算法选择.MRO(Method Resolution Order):方法解析顺序. Python3 只保留了C3算法! C3算法解析: 1.C3算法解析 C3算法:MRO ...
- XML与JSON的区别
JSON和XML的比较 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是XML ...
- Codeforces 185D(发现性质、欧拉定理)
学到的东西 不知道gcd时不妨先假设为d,然后为了满足全部式子说不定可以得到d的取值范围. 幂上带幂考虑欧拉定理的使用. 有几个特殊情况会破坏公式的完美不要紧,看看特殊情况是否能简便地判定. 连乘公式 ...
- hibernate Restrictions用法 HibernateTemplate Hibernate结合spring
常用方法 http://www.jb51.net/article/41541.htm ........................................... 博客分类: Hiberna ...
- net core 2.0 web api + Identity Server 4 + angular 5
net core 2.0 web api + Identity Server 4 + angular 5前台使用angular 5, 后台是asp.net core 2.0 web api + ide ...
- Jenkins+Gitlab+Ansible自动化部署(三)
接Jenkins+Gitlab+Ansible自动化部署(一)https://www.cnblogs.com/zd520pyx1314/p/10210727.html 和(二)https://www. ...
- vue之store中属性更新用法
//1.首先定义store对象下的属性 state: { data:'测试数据' } // 2.定义更改data数据的方法 mutations: { updatedata(state, p) { st ...
- nginx的基本操作
启动 nginx -c /etc/nginx/nginx.conf停止nginx -s stop nginx -s quit pkill -9 nginx重载nginx -s reload文件检测ng ...