返回顶部特效

<div style="height:3000px; background:gray;">
    clientHeight:内容可视区域的高度,与页面内容无关<br/><br/>
    offsetHeight:
    IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
    NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。<br/><br/>
    scrollHeight:
    IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
    NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。<br/><br/>
</div>

<div id="updown">
    <span class="up"></span>
    <span class="down"></span>
</div>
 <style type="text/css">
        <!--
        *{padding:0; margin:0}
        #updown{
            _top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?
            documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:
            document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));
            position: fixed;
            _position: absolute;
            top: 200px;
            right: 30px;
            display: none;

        }
        #updown span{
            cursor:pointer;
            width:48px;
            height:48px;
            display:block;
        }
        #updown .up{
            background:url(updown.png) no-repeat;
        }
        #updown .up:hover{
            background:url(updown.png) top right no-repeat;
        }
        #updown .down{
            background:url(updown.png) bottom left no-repeat;
        }
        #updown .down:hover{
            background:url(updown.png) bottom right no-repeat;
        }

    </style>
<script type="text/javascript" src="http://aqjs.ciwong.com/Content/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
          $("#updown").css("top",window.screen.availHeight/2-100+"px");//属性声明了显示浏览器的屏幕的可用高度
            $(window).scroll(function() {
                if($(window).scrollTop() >= 100){
                    $(‘#updown‘).fadeIn(300);
                }else{
                    $(‘#updown‘).fadeOut(300);
                }
            });
            $(‘#updown .up‘).click(function(){
                $(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);
            });
            $(‘#updown .down‘).click(function(){
                $(‘html,body‘).animate({scrollTop: document.body.clientHeight+‘px‘}, 800);//内容可视区域的高度,与页面内容无关
            });
        });

    </script>

图片下载:

时间: 2024-10-09 04:11:10

返回顶部特效的相关文章

挺个性的jQuery返回底部、返回顶部特效

运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

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

jquery代码: function gotoTop(min_height){ //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(//定义返

jquery返回顶部特效

<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:30px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ transition:color 1s; -moz-tra

原生js实现返回顶部特效

index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link herf="index.css"> </head> <body> <span id="icon"></span> <p>

Javascript 特效(一)返回顶部

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 body{ height:2000px;} 9 #box{ width:40px; height:40px;

常用小的特效(确认删除弹窗、返回顶部)

1.确认操作(如删除)弹窗. <script language="javascript"> function delcfm() { if (!confirm("确认要删除?")) { window.event.returnValue = false; } } </script> <input name="" type="submit" value="删除" onClick=&q

返回顶部和底部(动画)

<!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="Content-

jquery返回顶部,支持手机

效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些,下面是具体实现代码,兼容pc: <!DOCTYPE html> <html> <head> <meta http-

20款网页常用的返回顶部代码

jQuery网页滚动显示浮动导航带返回顶部按钮 css3悬浮返回顶部按钮悬停显示二维码特效 jQuery网页返回顶部固定层微信二维码代码 jQuery绿色的qq在线客服点击返回顶部代码 div css网页右侧返回顶部样式代码 jQuery响应式网页返回顶部按钮代码 jQuery win8扁平风格返回顶部和在线客服网站侧边栏代码 jquery扁平风格带二维码的页面滑动返回顶部按钮代码 jQuery仿威锋商城网站右侧悬浮层返回顶部代码 jQuery带微信二维码网页侧边返回顶部效果 jquery wi