唔。进来开发需求,当网页内容草鸡多的时候,用户就须要有个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. EasyUI - Datatable转Json and Json转Datatable

    using System; using System.Data; using System.Linq; using System.Collections; using System.Collectio ...

  2. AngularJS之WebAPi上传

    AngularJS之WebAPi上传(十)   前言 前面一系列我们纯粹是讲AngularJS,在讲一门知识时我们应该结合之前所学综合起来来做一个小的例子,前面我们讲了在MVC中上传文件的例子,在本节 ...

  3. BCM wifi驱动学习

    BCMwifi驱动学习 一.wifi详解1 1.代码路径:Z:\home\stonechen\svn\TD550_X\TD550\3rdparty\wifi\BCM43362\special\bcmd ...

  4. SPSS Modeler数据挖掘项目实战(数据挖掘、建模技术)

    SPSS Modeler是业界极为著名的数据挖掘软件,其前身为SPSS Clementine.SPSS Modeler内置丰富的数据挖掘模型,以其强大的挖掘功能和友好的操作习惯,深受用户的喜爱和好评, ...

  5. Incompatible namespaceIDs或连接被对端重置异常的解决

    Workaround 1: Start from scratch I can testify that the following steps solve this error, but the si ...

  6. LLBL Gen Pro 5.0

    LLBL Gen Pro 5.0 企业应用开发入门 Solutions Design 公司于2016年5月发布了LLBL Gen Pro 5.0,这个新版本的发布出乎于我的意料.我的猜想是从4.2升级 ...

  7. 浅析——SCTP协议(转)

    SCTP处于SCTP用户应用层与IP网络层之间,它运用“关联”(association)这个术语定义交换信息的两个对等SCTP用户间的协议状态 .SCTP也是面向连接的,但在概念上,SCTP“关联”比 ...

  8. activemq java版本要求

    <pre name="code" class="html">activemq: redis01:/root# cp apache-activemq- ...

  9. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  10. android ListView中CheckBox错位的解决

    貌似已经非常晚了,可是还是想记下笔记,想让今天完满. 在ListView中加了checkBox,但是发现点击改变其选中状态的时候,发现其位置错乱.状态改变的并非你选中的,百思不得其解.后面通过上网查资 ...