自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔。进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~
原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示。
于是乎,本屌丝就尝试写了下。唔,没发现,还挺easy的说~~
有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~
<pre name="code" class="javascript">//回到顶部js
$(function(){
var $btn_top = $('<a id="scrollTopBtn"><img src="css/web/images/scrollTop.png"></a>');
$btn_top.css({
'display':'none',
'width':'40px',
'height':'40px',
'position':'fixed',
'right':'20px',
'bottom':'100px',
'z-index':'999'
});
$("body").append($btn_top);
$("body").on("click","#scrollTopBtn",function(){
$("html,body").animate({scrollTop: 0},"slow");
});
var $btn = $("#scrollTopBtn");
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$btn.fadeIn(600);
}else{
$btn.fadeOut(600);
}
});
});
图片自己找个就好啦,我这里用的是绝对路径“css/web/images/scrollTop.png”
直接在第五行和第六行改下大小就可以,这样就避免了页面加入猫标签~~(>^ω^<)喵~~~
存成js文件,直接引用,哪疼用哪,谁用谁知道~~~
有交流请加QQ:1740437,欢迎不吝赐教~~
另寻求传说中的古风爱好小伙伴,以及民乐爱好小伙伴,或者拍摄视频微电影小伙伴~~
自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以的更多相关文章
- JavaScript实现网页回到顶部效果
在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...
- jquery实现"跳到底部","回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现“回到顶部”按钮功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
随机推荐
- 基于visual Studio2013解决C语言竞赛题之1069链表查找删除
题目 解决代码及点评 /* 功能:建立一个链表,每个结点包括:学号.姓名.性别.年龄.输入一个年龄,如果链表中的结点所包含的年龄等于此年龄, 将此结点删除,输出最后的链表. 时 ...
- AngelHack China 2013 招组队成员
AngelHack China 2013 connect me
- HDU 4350 Card
打表找规律,比赛应付了一下,其实还可以把内存再优化一半掉,下面的0都是手动填充的,可以优化掉 题意: T个测试数据 下面52个数字表示 从栈顶到栈底的52个数 n l r表示 从栈顶下数 [l,r] ...
- Codeforces Round #311 (Div. 2)
我仅仅想说还好我没有放弃,还好我坚持下来了. 最终变成蓝名了,或许这对非常多人来说并不算什么.可是对于一个打了这么多场才好不easy加分的人来说,我真的有点激动. 心脏的难受或许有点是由于晚上做题时太 ...
- 树后台数据存储(採用webmethod)
树后台数据存储 关于后台数据存储将集中在此篇解说 /* *作者:方浩然 *日期:2015-05-26 *版本号:1.0 */ using System; using System.Collection ...
- dataStage 7.5.1A
------------------------------ DataStage Server License ------------------------------ Serial Num ...
- win7 下使用cygwin
http://cygwin.com/index.html 还是看官网! 很多用windows的朋友不习惯于用linux的开发环境.虽然很乐意尝试一下,但是往往怕 linux系统打乱了自己的正 ...
- 用VC实现竖写汉字的方法
中国人自古就有自右至左.从上到下书写汉字的习惯.而当我们在自己所编写的应用程序中使用输出函数输出的总是自左至右的横排文字.有没有可能在我们的应用程序中实现竖写汉字的效果呢?笔者偶然发现了一种利用VC实 ...
- Delphi代码中嵌入ASM代码(简单明了)
前言 Delphi作为一个快速高效的开发平台,使用的人越来越多,但熟悉在Delphi代码中嵌入ASM代码的程序员我想不多,因为这方面的资料太少了,另一方面,它还需要有基本的汇编语言知识,关於汇编语言的 ...
- pathload --有效的网络带宽估计方法
上一篇博客简述了现行的带宽估计的方法,分类,以及一些问题. 见:http://blog.csdn.net/ice110956/article/details/11071969 上文列出了13种现行的方 ...