基于jquery的返回顶部效果(兼容IE6)_jquery

最近也在学jquery,就顺便记录一下了。

HTML

复制代码 代码如下:

<div class="scroll"></div>
<script type="text/javascript" src="../skins/css/jQuery.js" charset="UTF-8"></script>
<script type="text/javascript" src="../skins/css/top.js" charset="UTF-8"></script>

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下图片抖动*/

top.js

复制代码 代码如下:

$(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;
});
$(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.js文件哦!

时间: 2024-07-29 15:02:27

基于jquery的返回顶部效果(兼容IE6)_jquery的相关文章

jQuery实现返回顶部效果的方法_jquery

本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;position:relative;cursor

基于jQuery实现返回顶部实例代码_jquery

效果图展示如下所示: 使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http:

jQuery实现返回顶部效果五种方法

这里我介绍五种利用jQuery实现返回顶部效果 方法1.好处:回顶部按钮紧贴网页外层DIV边框:缺点:滚动时不够平滑.  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

jQuery实现返回顶部效果的方法

  本文实例讲述了jQuery实现返回顶部效果的方法.分享给大家供大家参考.具体实现方法如下: 1.首先是CSS样式: ? 1 2 3 4 5 6 7 /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_display:none} #shang,#comt,#xia{background:url(../images/sprite.png) no-repeat;positi

jquery实现返回顶部效果代码

jquery中返回顶部核心代码就是  代码如下 复制代码 // Back To Top $(document).ready(function(){   $('.top').click(function() {       $(document).scrollTo(0,500);    }); }); //Create a link defined with the class .top <a href="#" class="top">Back To To

基于jQuery创建鼠标悬停效果的方法_jquery

本文实例讲述了基于jQuery创建鼠标悬停效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 创建HTML: <ul> <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> </ul> 2. 选择.mainnav的class: $(".mainnav&qu

基于jQuery实现返回顶部跳转效果

 代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果_jquery

要实现该效果,首先要先了解以下几点基础知识: 窗体滚动事件:$(window).scroll(function(){...}); 获取窗体滚动距离:$(window).scrollTop(); 获取窗体高度:$(window).height(); 了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了. 1.准备界面结构代码: 复制代码 代码如下: <form id="form1" runat="server"> <div> &

jquery实现页面常用的返回顶部效果_jquery

本文实例为大家分享了jquery实现返回顶部效果的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; padding: