回到顶端的jquery
现在的淘宝啊,京东啊,各种网站都有一个功能,有一个按钮,在页面最顶端的时候不会显示,当往下拉到一定的时候会出现。点击他会直接跳到页面的顶端。代码如下:
html代码:
<div id="top">
<p id="back-to-top"><a href="#top"><span><img src="data:images/gotop.jpg"></span>返回顶部</a></p>
</div>
css代码:
p#back-to-top{position:fixed;display:none;bottom:100px;right:10px;overflow: hidden;}
p#back-to-top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;-moz-transition:color 1s;-webkit-transition:color 1s;-o-transition:color 1s;overflow: hidden;}
p#back-to-top a:hover{color:#979797;}
p#back-to-top a span{display:block;height:50px;width:50px;margin-bottom:5px;-moz-transition:background 1s;-webkit-transition:background 1s;-o-transition:background 1s;}
#back-to-top a:hover span{overflow: hidden;}
#back-to-top a span img{border:none;width: 50px;height: 50px;}
jquery代码:
/*top特效*/
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#down").smartFloat();
回到顶端的jquery的更多相关文章
- js监听滚动条 回到顶端
效果:当出现滚动条,且滚动条出现移动时,把回到顶端按钮 显示出来:当滚动条回到顶部时,将回到顶端按钮隐藏. <script type="text/javascript"> ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...
- jQuery回到顶部插件jQuery GoUp
插件描写叙述 jQuery GoUp!是一个简单的jQuery插件,让你的网页用户直接回到顶部. 用法很easy 引用jquery库和jquery.goup.min.js到你的页面 <scrip ...
- 点击回到顶部(jQuery)
写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件 和animate特效. html部分 <div class="pulltop"> <img sr ...
- csdn回到顶端
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 回到顶端js实现
function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElemen ...
- jQuery滚动条回到顶部或指定位置
jQuery滚动条回到顶部或指定位置 在很多网站,为了增强用户体验,我们会看到回到顶部的按钮,不用手动拖拽滚动条就能回到顶部,非常方便.下面就介绍用jquery实现的滚动到顶部的代码 $(functi ...
- JQuery 回到顶部效果
图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...
- jquery 第三章
1.回顾$(document).ready(function(){ })$(function(){ }) ID选择器.类选择器.元素选择器层次选择器:空格(上文下:tr td{})属性过滤 ...
随机推荐
- CSS Sprites (css精灵)
CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
- Git基础教程(一)
本教程为学习笔记,github作为最受欢迎的资源库,不可不学!详细教程参见:廖雪峰的官方网站Git教程系列.准备花两篇幅搞定实战总结,闲言碎语少说,脚踏实地求真! 1,Git入门 Git是 ...
- leetcode HouseRobber Dp Code
#include <malloc.h> int MAX(int x,int y){ return x>y?x:y;} int rob(int* nums, int numsSize) ...
- Bootstrap学习-环境安装
1.<meta http-equiv="X-UA-Compatible" content="IE=edge"> 让IE运行最新的渲染模式. 2.&l ...
- 2272: [Usaco2011 Feb]Cowlphabet 奶牛文字
2272: [Usaco2011 Feb]Cowlphabet 奶牛文字 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 138 Solved: 97 ...
- Java设计模式之职责型模式总结
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6548127.html 所谓职责型模式,就是采用各种模式来分配各个类的职责. 职责型模式包括 ...
- 谈谈数据库中MyISAM与InnoDB区别 针对业务类型选择合适的表
MyISAM:这个是默认类型,它是基于传统的ISAM类型, ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法. ...
- 运行错误:应用程序无法启动因为并行配置不正确。the application has failed to start because its side-by-side configuration is incorrect 解决方法
问题描述: 当电脑同时安装VS2008和VS2008 SP1时,编译出来的Visual C++程序的manifest 文件会默认引用VS2008的MFC版本和CRT版本.如下: <depende ...
- AutoIt 脚本小试——刷网易云音乐歌单
AutoIt 确实是个很强大的脚本工具. 如果早知道有这个,当初是怎么都不会去学易语言的 (๑•̀ω•́๑) 这是个简单脚本 = ๛ก(ー̀ωー́ก) 用来增加歌单播放次数和个人的听歌量. 原理不过 ...
- IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS
1.购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135.html 2.IIS7 / IIS 7.5 下绑定 HTTPS 网站(购买Wildcard SSL ...