样式:

 <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返回顶部特效的更多相关文章

  1. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  2. javascript返回顶部几种代码总结

    纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration ...

  3. javascript返回顶部插件+源码

    javascript插件->returnTop.js: /* ** 插件名称returnTop.js ** 调用返回头部单例参数说明 ** 调用方式:turn.init(ele,speed); ...

  4. 写一个JavaScript“返回顶部”功能

    在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮. 效果演示可以查看本页.如果页面有滚动高度,右下角就会有一个含有“返回顶部”字样的黑色背景半透明的小条条.点击这里“ ...

  5. WEB前端--返回顶部特效源码

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  6. 【转】用jquery编写动态的返回顶部特效

    jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div i ...

  7. Javascript返回顶部

    控制按钮下拉到达一定距离时显示,返回顶层时消失,用JS中的延时定时器来模拟滚动条效果 <script type="text/javascript"> window.on ...

  8. javascript 返回顶部

    <style> #linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; ...

  9. 原生js实现返回顶部特效

    index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

随机推荐

  1. ==和Equal()的区别

    我们在编程的时候,经常会遇到判断两个对象是否相等的情况.说到判断两个对象是否相等,就不得不说对象的类型和对象在内存中的存储情况. 对象类型可以分为值类型和引用类型: 值类型包括:简单类型.结构类型.枚 ...

  2. datagrid带查询带分页

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=&qu ...

  3. BZOJ 3261 最大异或和 可持久化Trie树

    题目大意:给定一个序列,提供下列操作: 1.在数组结尾插入一个数 2.给定l,r,x,求一个l<=p<=r,使x^a[p]^a[p+1]^...^a[n]最大 首先我们能够维护前缀和 然后 ...

  4. VMThread占CPU高基本上是JVM在频繁GC导致,原因基本上是冰法下短时间内创建了大量对象堆积造成频繁GC。

    今天线上一个java进程cpu负载100%.按以下步骤查出原因. 1.执行top -c命令,找到cpu最高的进程的id 2.执行top -H -p pid,这个命令就能显示刚刚找到的进程的所有线程的资 ...

  5. 微信小程序直播

    微信小程序直播(转) 通过PC实现推流,然后用小程序进行直播播放,也就是PC->小程序. 小程序支持 小程序的直播能力只针对某些类目开放并且需要申请开通. 支持的类目 社交 直播 教育 在线教育 ...

  6. wordpress添加关键字

    wordpress自动添加标签为关键字: <?php //判断是否为首页 if ( is_home ()) { $description = "jcomey一个文艺青年的个人博客&qu ...

  7. JavaScript学习笔记-构造函数

    什么是构造函数 简单说构造函数是类函数,函数名与类名完全相同,且无返回值.构造函数是类的一个特殊成员函数. JavaScript构造函数 * 在JavaScript的世界里没有类的概念,JavaScr ...

  8. Fluent Ribbon 第七步 状态栏

    上一节,介绍了StartScreen的主要功能,本节介绍Ribbon的另外一个小功能StatusBar,状态栏是脱离ribbon之外单独存在,可以单独使用的控件 其基本代码定义如下: <Flue ...

  9. Visual Assist X助手的一些使用技巧和快捷键

    部分快捷键 Shift+Alt+F // Find References 查找引用 Shift+Alt+S // FindSynbolDialog打开查找符号对话框 Alt+G // GotoImpl ...

  10. Extjs combobox 实现搜索框的效果

    目的:使用combobox实现一个类似搜索框的效果,即用户输入内容后,出现相关下列列表,提供选择. 实现:extjs3 中combobox自身带这个功能即在remote模式下,store在load的时 ...