JavaScript返回顶部特效
样式:
<style type="text/css">
/*返回顶部特效*/
a
{
border: none;
text-decoration: none;
outline: none; /*移除虚线框 IE8,FF有用*/
hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/
}
*html
{
background-image: url(about:blank);
background-attachment: fixed;
} /*低版本浏览器防止抖动的,必须有*/
#tbox
{
width: 65px;
height: 140px;
float: right;
position: fixed;
_position: absolute;
_bottom: auto;
_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,)||)-(parseInt(this.currentStyle.marginBottom,)||)));
_margin-bottom: 50px;
}
/*这个只能改宽高其他的不要修改,需要滚动的内容都要放在这个div里面*/
#jiayi
{
display: block;
background: url({cssdir}/images/tj_QQ.png) no-repeat;
width: 65px;
height: 65px;
margin-bottom: 5px;
text-indent: -9999px;
overflow: hidden;
cursor: pointer;
} #gotop
{
display: block;
width: 65px;
height: 65px;
text-indent: -9999px;
overflow: hidden;
color: #fff;
background: url(/images/tj_fanhui.png) no-repeat;
position: absolute;
display: none;
cursor: pointer;
}
</style>
JavaScript:
<script type="text/javascript">
jQuery(document).ready(function () {
//返回顶部方法
jQuery(window).scroll(function () {
t = jQuery(document).scrollTop();
if (t > ) {
jQuery('#gotop').fadeIn('slow');
} else {
jQuery('#gotop').fadeOut('slow');
}
})
a(, ); //#tbox的div距浏览器底部和页面内容区域右侧的距离
jQuery('#gotop').click(function () {
jQuery('body,html').animate({
scrollTop:
},
); //点击回到顶部按钮,缓懂回到顶部,数字越小越快
return false;
})
//end
});
//返回顶部方法
function a(x, y) {
l = jQuery('#main').offset().left;
w = jQuery('#main').width();
jQuery('#tbox').css('left', (w + x - ) + 'px');
jQuery('#tbox').css('bottom', y + 'px');
} //获取#tbox的div距浏览器底部和页面内容区域右侧的距离函数#main为页面的可视宽度
// target[0] = {endtime};
// time_id[time_id.length] = "TimeCounter_0"
</script>
Html:
<div id="main">
</div>
<div id="tbox" style="z-index: 9999;">
<a href="http://wpa.qq.com/msgrd?v=3&uin=3118036766&Site=市政社区&Menu=yes" target="_blank"
id="jiayi">返回列表首页</a> <a id="gotop" href="javascript:void(0)" title="返回顶部">回到顶部</a>
</div>
Images:
JavaScript返回顶部特效的更多相关文章
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- javascript返回顶部几种代码总结
纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...
- javascript返回顶部插件+源码
javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...
- 写一个JavaScript“返回顶部”功能
在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...
- WEB前端--返回顶部特效源码
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- 【转】用jquery编写动态的返回顶部特效
jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...
- Javascript返回顶部
控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...
- javascript 返回顶部
<style> #linGoTopBtn { POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...
- 原生js实现返回顶部特效
index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
随机推荐
- QT国际化,中英文等多语言界面显示的方法
在网上学习了一下QT的国际化使用方法,最后将自己试成功的方法总结例如以下: 当中遇到的问题有:生成的ts文件里 代码中的中文 有的不显示,有的显示乱码. 步骤1: 生成.ts文件,在pro项目文件 ...
- MySQL服务停止,无法启动了~
怎么解决mysql服务无法启动的问题
- (推荐JsonConvert )序列化和反序列化Json
在Json文本和.Net对象之间转换最快的方法是试用JsonSerializer. JsonSerializer通过将.Net对象属性名称映射到Json属性名称,并为其复制值,将.Net对象转换为其J ...
- 使用JMAP dump及分析dump文件
查看整个JVM内存状态 jmap -heap [pid]要注意的是在使用CMS GC 情况下,jmap -heap的执行有可能会导致JAVA 进程挂起 查看JVM堆中对象详细占用情况jmap -his ...
- django用户认证系统——重置密码7
当用户不小心忘记了密码时,网站需要提供让用户找回账户密码的功能.在示例项目中,我们将发送一封含有重置用户密码链接的邮件到用户注册时的邮箱,用户点击收到的链接就可以重置他的密码,下面是具体做法. 发送邮 ...
- Segmented 标签栏 切换效果
转载:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0512/1615.html http://www.it165.net/pr ...
- git GUI 入门
一:安装一个git 及gui 二:配置gui及线上的git链接 在Git Gui中,选择Remote->add添加远程服务器,远程服务器信息有两种填写方式,填写https地址或ssh地址,对应g ...
- 修改yum源为阿里云的
将Centos的yum源更换为国内的阿里云源 author:headsen chen date:2018-04-28 13:33:41 1.备份 mv /etc/yum.repos.d/CentO ...
- [LintCode] 用栈实现队列
class Queue { public: stack<int> stack1; stack<int> stack2; Queue() { // do intializatio ...
- 支付宝app支付提示 系统繁忙,请稍后重试
v2版本的支付宝支付,无论怎么调试返回的都是系统繁忙,请稍后重试提示.经过对给的示例代码的仔细研究,最后发现是由于老版本的sign_type 不加入签名计算,而新版本的支付签名它是加入签名计算的.供大 ...