唔。进来开发需求,当网页内容草鸡多的时候,用户就须要有个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. jQuery ajax表单提交实现局部刷新

    jQuery Ajax 异步提交 Form 表单,如果使用 get 请求,注意中文乱码问题,jquery 会先使用 iso8859-1 解码,然后发给服务器,如果使用 post 请求,则直接将中文内容 ...

  2. 6月19日 NSFileHandle文件类的常用方法

       NSFileManager类主要对文件的操作(删除,修改,移动,复制等):    NSFileHandle类主要对文件内容进行读取和写入操作    NSFileHandle处理文件的步骤     ...

  3. JSTL解析——005——core标签库04

    直接入主题,标签讲解 1.<c:import>标签 JSP里面有<% file include="XX"%> 与<jsp:include>,JS ...

  4. H2内存数据库 支持存储到文件

     准备工作 1.下载JDK(本人下载的版本号为JDK1.7).环境变量设置JAVA_HOME.设置PATH(%JAVA_HOME%\bin%). 2.下载并解压:h2-2014-07-13.zip ...

  5. vscode编写插件

    vscode编写插件详细过程 前言 之前编写了一个vscode插件用vscode写博客和发布,然后有园友要求写一篇来介绍如何开发一个vscode扩展插件,或者说介绍开发这个插件的过程.然而文章还没有写 ...

  6. VC/MFC ListCtrl 控件功能使用汇总(转)

    以下未经说明,listctrl默认view 风格为report 相关类及处理函数 MFC:CListCtrl类 SDK:以 “ListView_”开头的一些宏.如 ListView_InsertCol ...

  7. Mysql对自增主键ID进行重新排序

    Mysql数据库表的自增主键ID号经过一段时间的添加与删除之后乱了,需要重新排列. 原理:删除原有的自增ID,重新建立新的自增ID. 1,删除原有主键: ALTER TABLE `table_name ...

  8. LV在系统重启后不能自动激活(boot.lvm&after.loca)

    同类相关文章:http://blog.csdn.net/laven54/article/details/9121661 最近发现suse11sp2的系统解决了异常死机的问题之后,又引入了另外的问题,比 ...

  9. Ubuntu通过源代码编译安装Octave 4.0

    本教程/笔记,意在指导在Ubuntu及其它Linux系统上怎样通过源代码安装Octave. Octave简单介绍 Octave是GNU旗下取代matlab的数学工具软件,语法与matlab高度兼容.而 ...

  10. flashcache中应用device mapper机制

    Device Mapper(DM)是Linux 2.6全面引入的块设备新构架,通过DM可以灵活地管理系统中所有的真实或虚拟的块设备. DM以块设备的形式注册到Linux内核中,凡是挂载(或者说“映射” ...