唔。进来开发需求,当网页内容草鸡多的时候,用户就须要有个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文件就可以的更多相关文章

  1. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  2. jquery实现"跳到底部","回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery滚动条回到顶部或指定位置

    jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...

  4. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  5. javascript 特效实现(2)——回到顶部效果

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

  6. JQuery 实现返回顶部效果

    首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...

  7. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery实现“回到顶部”按钮功能

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

  9. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

随机推荐

  1. 【linux】开发环境说明

    欢迎转载,转载时请保留作者信息,谢谢. 邮箱:tangzhongp@163.com 博客园地址:http://www.cnblogs.com/embedded-tzp Csdn博客地址:http:// ...

  2. sql:oracle, CURSOR

    CursorsYou use a cursor to fetch rows returned by a query. You retrieve the rows into the cursor usi ...

  3. ubuntu 安装 maven3.2

    1.下载并解压 apache-maven-3.2.5-bin.tar.gz tar -xzvf apache-maven--bin.tar.gz 2.设置环境变量 sudo gedit ~/.prof ...

  4. oracle执行带输入输入参数的存储过程

    declare a1 ); a2 ); begin PKG_INPATIENT.prc_autojf('Y', a1, a2); end;

  5. Android 事件处理

    目的:通过全面的分析Android的鼠标和键盘事件.了解Android中如何接收和处理键盘和鼠标事件,以及如何用代码来产生事件. 主要学习内容: 1. 接收并处理鼠标事件:按下.弹起.移动.双击.长按 ...

  6. linux系统日志及其rsyslog服务

    日志是系统用来记录系统运行时候的一些相关消息的纯文本文件 /var/log下保存着大量的纯文本日志文件 日志的目的是为了保持相关程序的运行状态,错误消息,为了对系统运行进行错误分析使用 1.内核消息 ...

  7. 【OpenMesh】Some basic operations: Flipping and collapsing edges

    这一节中你将学到一些OpenMesh中早已提供的基础操作. 内容包括三角形网格边的翻转以及通过连接邻接的顶点边缘折叠. 三角形网格的翻转(Flipping edges) 考虑到两个邻接面的三角形网格中 ...

  8. windows socket----select模型

    一般我们的网络编程都是用bind ,listen,accept,send/sendto,recv/recvfrom.在创建套接字的时候,是默认使用阻塞模式的,每当我们调用send/sendto等方法时 ...

  9. K-means clustering (K-means聚类)

    问题: K-所有值聚类是无监督学习算法 设数据集.当中,. 如果这个数据能够分为类. 把这个问题模型化: , 当中代表第类的聚点(中心点.均值). 该模型能够用EM算法进行训练: 初始化,. E步:固 ...

  10. Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法

    首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片 ...