jquery 回到顶部,简洁大方
效果
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAAEVCAIAAAD8SOfpAAAFyklEQVR4nO3cPWtbZxzG4X4rQ5dCh36FfgMPyRCSoWumzMGbh5IlEDCZ66Z1lhIyNCnxaxLLkELs1KYooUlbH725dQch100VS0fH0u1I18VBIBB/zgM/JCQ953zS6OfJkyeHh4eNRqPVarVarfb/PH767Bg+rNls7u3tHRwcvHnz5rdT3r5923088e7du09UyDiokLxyFRb9qJCKVEheuQoP+1EhFamQvHIV/tmPCqlIheSpkLxyFf7Rjwqp6HwqLIpChYysXIW/97O6uloURbPZ7JugChmoXIVb/aytrTUaDRUyslF+L+z+ZXJS3vr6ugqpolyFzVO6zXU6nY2Nje5TFTKachWehNXpdDqdztHR0dHR0cbGxhkJqpCBylV4dMpfPZubm2ckqEIGKlfh3/1sbm6ekaAKGWj0Ck9GbG1tqZAqylXYd4QKqUiF5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXlVK2y327VaTYVUUbXCer2+u7urQqoYvcJ2u12v158/f354eKhCqihX4dYptVptd3d3YIIqZKByFQ4MToWMQIXkqZA8FZKnQvJUSJ4KyVMheSokT4XklatwbrnoHl+sFFcfNX78taVCqhuxwu7x6bfF17WmCqmoUoVzy8Xn3xfLuwPeEVXI2apWOLdcfPVTQ4VUcQ4VfvmDCqnkHCqcWy5USBUqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+F5KmQPBWSp0LyVEieCslTIXkqJE+FF83+w6XFxaWH++nzmCQVXij79xauXZqfn5+/dG3h3uyE6Oqni+Mkwa4ZCvEcKrz6SIXVvZfgbIVYtcLPviu+cVV8VX0TnKEQq1a4uO0OIRWdkeCshOhuSVn7925eOavAnis3pzlEd44LGjbBqQ9RhSnlEpzuEFUYMUqCUxyiCidv9ASnNUQVTtjgBK/cWFy8Meg10xWiCidpmATvrjWPj5trd2cpRBVOzNAJds1SiCqcjJIJds1MiCqcgJES7JqNEFU4bhUS7JqBEFU4Vq9XFqol2DVMiAsrryexorFQ4VitLJy5T2GoBLsGhnhpYWW8axmjSVS4vrOTXmZKc+3O9cvVE+wN+3CIl6/fKTfsQplEhS/2XqWXGdQ/xNIJ9ob1C/HjTvB4MhU2W630MrPeD3HEBHvD/hviR5/gcdkKHz99NvyxvrPzYu/VzCfY9W+IlRLsDeuFOA0JHpetMH22H7Xm9v3bt5YevDyXapovHyzdun1/ewoSPFYhF4EKyVMheSokT4XkqZA8FZKnQvJUSJ4KyVMheePdzfDzq19a7U56jVx0Y3wvbLU7B/XXq9u1Vrs9prNnOoz9E3m/Xp/tXa4MNvYKW+3ODO/4ZyiT+HYyw1c/MRQVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJUyF5KiRPheSpkDwVkqdC8lRIngrJK1XhP3EoPGHaP67nAAAAAElFTkSuQmCC" alt="" />
HTML
<div id="back-to-top" title="返回顶部"><i class="fa fa-chevron-up"></i></div>
style
<style>
/*returnTop*/
div#back-to-top {
font-size: 40px;
position: fixed;
display: none;
bottom: 100px;
right: 60px;
cursor: pointer;
}
</style>
script
<script>
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#back-to-top").fadeIn(1000);
}
else {
$("#back-to-top").fadeOut(1000);
}
}); //点击返回顶部
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
});
</script>
注意,要引入 font-awesome.css 才可显示图标
jquery 回到顶部,简洁大方的更多相关文章
- jQuery回到顶部
jquery回到顶部 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=& ...
- Jquery 回到顶部
转:http://www.cnblogs.com/DemoLee/archive/2012/04/20/2459082.html 用jQuery实现渐隐渐显的返回顶部效果(附多图) 先来看几个图片 ...
- jQuery回到顶部插件jQuery GoUp
插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...
- html css jquery 回到顶部按钮
今天做了个回到顶部的功能,在这里记录一下,有需要可以拿去试试! CSS部分,很简单就一个class /*回到顶部*/ .back-top { position: fixed; right: 15px; ...
- Jquery回到顶部插件【query.scrollUp.js】使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...
- jquery 回到 顶部
1. 页面内容较多, 从底部超链接 点击回到页面顶部 // 回到顶部 var $top = $('<a class="doc-gotop" href="javasc ...
- Jquery回到顶部功能
问题描述: 在网页中,我们经常会由于网页内容过长,而需要在浏览网页时有一个快速回到网页顶部的功能,在浏览网页内容离顶部有一段距离时,出现快速回到网页顶部的工具,从而能使我们的网页更人性化. 问题的产生 ...
- JQuery 回到顶部效果
图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...
- Jquery回到顶部效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
随机推荐
- GPS 气压计高度测量
气压计测某个点的高度是不准的,因为天气.温度等原因会导致不同时刻同一地点气压不同,所以气压计测量不准.但气压计测量相对高度是很准的.GPS测相对高度不准,但测定点高度比较准.
- Linux /proc/$pid部分内容详解
auxv /proc/[pid]/auxv包含传递给进程的ELF解释器信息,格式是每一项都是一个unsigned long长度的ID加上一个unsigned long长度的值.最后一项以连续的两个0x ...
- HTML入门教程 这里可以免费学习啦
本文目标 30分钟内让你明白HTML是什么,并对它有一些基本的了解.一旦入门后,你可以从网上找到更多更详细的资料来继续学习. 什么是HTML HTML是英文Hyper Text Mark-up Lan ...
- Linux中SysRq的使用(魔术键)
转:http://www.chinaunix.net/old_jh/4/902287.html 魔术键:Linux Magic System Request Key Hacks 当Linux 系统不能 ...
- 序言<EntityFramework6.0>
Entity Framework是微软战略性的数据访问技术,不同与早期访问技术,Entity Framework并不耦合在Visual Studio中,它提供了一个全面的, 基于模型的生态系统,使您能 ...
- ring3硬件断点
4个断点寄存器DR0~DR3用来设置断点的线性地址. DR6为状态寄存器,DR7为控制寄存器. DR4和DR5保留.当CR4.DE==1时,访问DR4和DR5产生#UD异常:IF CR4.DE==0, ...
- .NET程序运行过程产生的问题
1.数据兼容性 功能模块的开发,会影响历史数据以及新数据的更新和体现.比如开发功能007,007支持了金额可变,数量不可变的原理.而历史数据均是数量可变,金额不可变的原理.此时,就会产生了问题. 2. ...
- 在 Delphi 中判断一个字符是中文的方法
http://blog.163.com/l1_jun/blog/static/143863882011741124581/ 由于 Delphi2005 支持中文标识符,在编写 PASCAL 词法分析器 ...
- 将Unreal4打包后的工程嵌入到Qt或者桌面中
#include "widget.h" #include "ui_widget.h" #include "windows.h" #inclu ...
- unity 协程
StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,但是在unity中有些元素是不能操作的.这个时候可以使用协程来完成. 使 ...