当前位置:  编程技术>jquery

jquery返回顶部效果(兼容IE6)的实现代码

    来源: 互联网  发布时间:2014-09-03

    本文导语:  jquery实现首页返回顶部的效果,且解决了IE6不兼容position:fixed问题,分享给大家,有用到的朋友参考下。 1,HTML部分   代码示例: 2,CSS部分   代码示例: .scroll{ background:url(/image/scroll.gif) no-repeat center top transparent; bot...

jquery实现首页返回顶部的效果,且解决了IE6不兼容position:fixed问题,分享给大家,有用到的朋友参考下。

1,HTML部分
 

代码示例:


2,CSS部分
 

代码示例:
.scroll{
background:url(/image/scroll.gif) no-repeat center top transparent;
bottom:100px;
cursor:pointer;
height:67px;
width:18px;
position:fixed;
_position:absolute; /*兼容IE6*/
_top: expression(eval(document.documentElement.scrollTop)+700); /*700为图片距离顶部的设定距离,可以修改。不加700则图片紧贴在顶部滚动*/
}
html{_text-overflow:ellipsis;} /*解决IE6下图片抖动*/

3,js脚本文件top.js
 

代码示例:
//jquery返回顶部
$(document).ready(function(){
var show_delay;
var scroll_left=parseInt((document.body.offsetWidth-960)/2)+961; //960为页面宽度
$(".scroll").click(function (){
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
}); www.
$(window).resize(function (){
scroll_left=parseInt((document.body.offsetWidth-960)/2)+961;
$(".scroll").css("left",scroll_left);
});
reshow(scroll_left,show_delay);
});
function reshow(marign_l,show_d) {
$(".scroll").css("left",marign_l);
if((document.documentElement.scrollTop+document.body.scrollTop)!=0)
{
$(".scroll").css("display","block");
}
else
{
$(".scroll").css("display","none");}
if(show_d) window.clearTimeout(show_d);
show_d=setTimeout("reshow()",500);
}

    
 
 

您可能感兴趣的文章:

  • Jquery实现侧边栏跟随滚动条固定(兼容IE6)
  • jquery分页插件jpaginate在IE中不兼容问题
  • 在jquery中combobox多选的不兼容问题总结
  • 通过pjax实现无刷新翻页(兼容新版jquery)
  • jQuery.event兼容各浏览器的event详细解析
  • jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
  • jquery 选中checkbox兼容问题如何解决?
  • jquery禁用右键、文本选择功能、复制按键的代码(兼容多浏览器)
  • jQuery右下角弹出广告代码兼容多浏览器
  • jquery div拖拽效果(兼容浏览器)
  • JS遮罩层效果(兼容ie firefox) jQuery遮罩层实例
  • jquery 密码强度验证代码(兼容IE,火狐,谷歌)
  • jquery 导航菜单代码(兼容IE6,IE7,FF等)
  • jquery左边浮动到一定位置时显示返回顶部按钮
  • jquery与css实现返回顶部的效果代码
  • jquery实现固定在顶部的菜单
  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
  • jquery网页回到顶部效果(图标渐隐,自写)
  • jQuery实现返回顶部功能适合不支持js的浏览器
  • jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
  • jquery实现返回顶部的例子
  • jquery插件tooltipv顶部淡入淡出效果使用示例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • 链接渐变效果 jQuery glow
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  • jQuery 幻灯片效果插件 plusview
  • jQuery图片效果切换 Adipoli
  • jQuery 幻灯效果显示插件 Diapo
  • jQuery文本效果插件 Textualizer
  • jQuery在iPhone/iPad的滚动效果处理 Overscroll
  • jQuery轮盘效果插件 Roundabout
  • jQuery淡入淡出效果 InnerFade
  • jQuery图片缩放效果 FancyZoom
  • jQuery图片幻灯手风琴效果插件 Slidorion
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3