首页 > 代码库 > 简单返回顶部代码

简单返回顶部代码

2024-07-08 19:40:11   227人阅读

动态按需加载返回顶部，css侧边屏幕绝对定位，结合简单jQuery动画实现更好体验

/*默认样式，主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/#gotoTop{/*返回顶部按钮的位置与样式*/    display:none;    position:fixed;    text-align:center;/*实现按钮内部字体的水平居中 */     top:75%;/*定位向上的位置*/    left:50%;/* 相对于水平向右移50%  */    cursor:pointer;    margin-top:-50px;/*在向下75%的基础上向上50px */    margin-left:520px;/*在右移50%的基础上再像右移520px */    /* 按钮样式*/    padding:9px 4px;    width:20px;    border:1px solid #e0e0e0;    background:#fff;}/*用CSS表达式(expression)来实现ie6下position:fixed效果*/#gotoTop{    _position:absolute;    _top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}/*鼠标进入的反馈效果*/#gotoTop.hover{    background:#5CB542;    color:#fff;    text-decoration:none;}
html代码
<!DOCTYPE HTML > <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  </head><body style="height:1500px;"><style type="text/css">/*默认样式，主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/#gotoTop{/*返回顶部按钮的位置与样式*/    display:none;    position:fixed;    text-align:center;/*实现按钮内部字体的水平居中 */     top:75%;/*定位向上的位置*/    left:50%;/* 相对于水平向右移50%  */    cursor:pointer;    margin-top:-50px;/*在向下75%的基础上向上50px */    margin-left:520px;/*在右移50%的基础上再像右移520px */    /* 按钮样式*/    padding:9px 4px;    width:20px;    border:1px solid #e0e0e0;    background:#fff;}/*用CSS表达式(expression)来实现ie6下position:fixed效果*/#gotoTop{    _position:absolute;    _top:expression(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px")}/*鼠标进入的反馈效果*/#gotoTop.hover{    background:#5CB542;    color:#fff;    text-decoration:none;}</style><script type="text/javascript">$(document).ready(function() {    function gotoTop(min_height){    //min_height:确定长度为多少的时候出现返回顶部按钮，    //获取页面的最小高度，无传入值则默认为600像素    min_height ? min_height = min_height : min_height = 600;    //为窗口的scroll事件绑定处理函数    $(window).scroll(function(){        //获取窗口的滚动条的垂直位置        var s = $(window).scrollTop();        //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐        if( s > min_height){            $("#gotoTop").fadeIn(100);//按钮动画出现        }else{            $("#gotoTop").fadeOut(200);//按钮动画消失        };    });     };gotoTop(100);/*疑问？为什么gotoTop函数只执行一次，而他内部的scroll函数会一直执行*/     $("#gotoTop").click(//定义返回顶部点击向上滚动的动画        function(){$(‘html,body‘).animate({scrollTop:0},700);    }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现        function(){$(this).addClass("hover");},        function(){$(this).removeClass("hover");    });});</script><div id="page" >测试回到顶部方法</div><div id="gotoTop">返回顶部</div></body></html>
jQuery(document).ready(function($){$(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});$(‘#comt‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#comments‘).offset().top}, 800);});$(‘#xia‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#footer‘).offset().top}, 800);});});
代码扩展
jQuery(document).ready(function($){$(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});$(‘#comt‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#comments‘).offset().top}, 800);});$(‘#xia‘).click(function(){$(‘html,body‘).animate({scrollTop:$(‘#footer‘).offset().top}, 800);});});是点击定位的意思点击ID为shang的元素，回到顶部点击ID为comt的元素，回到ID为comments的位置，就是评论的位置点击ID为xia的元素，回到底部
animate是jq的一个特效的函数方法定义和用法animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。$(‘#shang‘).click(function(){$(‘html,body‘).animate({scrollTop: ‘0px‘}, 800);});的意思就是滚动条跳到0的位置，页面移动速度是800

 


联系
我们