您现在的位置: 365建站网 > 365学习 > 回到和返回顶部代码实例

回到和返回顶部代码实例

文章来源:365jz.com     点击数:129    更新时间:2018-10-22 10:27   参与评论

在网站里很常见的点击回到头部,点击回到顶部,今天我们就来讲讲那些特别简单的点击就能回到头部的代码。

回到和返回顶部代码实例代码一:


<!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-Type" content="text/html; charset=utf-8" />
<title>jQuery火箭图标返回顶部代码 - 365建站网</title>
<script src="http://www.365jz.com/js/jquery-1.11.1.min.js" type="text/JavaScript"></script>
<style type="text/CSS">
body{height:3000px;}
/*回到顶部*/
#rocket-to-top div {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#rocket-to-top .level-2 {
    background: url("http://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#rocket-to-top .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#rocket-to-top {
    background: url("http://www.365jz.com/images/common/o_rocket_button_up.png") no-repeat scroll 0 0 transparent;
    cursor: default;
    display: block;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0;
    top: 80%;
    width: 149px;
    z-index: 11;
}
    
</style>
<script type="text/javascript">
// jQuery火箭图标返回顶部代码
$(function() {
    var e = $("#rocket-to-top"),
    t = $(document).scrollTop(),
    n,
    r,
    i = !0;
    $(window).scroll(function() {
        var t = $(document).scrollTop();
        t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
            marginTop: "-1000px"
        },
        "normal",
        function() {
            e.css({
                "margin-top": "-125px",
                display: "none"
            }),
            i = !0
        })) : e.fadeIn("slow")
    }),
    e.hover(function() {
        $(".level-2").stop(!0).animate({
            opacity: 1
        })
    },
    function() {
        $(".level-2").stop(!0).animate({
            opacity: 0
        })
    }),
    $(".level-3").click(function() {
        function t() {
            var t = e.css("background-position");
            if (e.css("display") == "none" || i == 0) {
                clearInterval(n),
                e.css("background-position", "0px 0px");
                return
            }
            switch (t){
            case "0px 0px":
                e.css("background-position", "-298px 0px");
                break;
            case "-298px 0px":
                e.css("background-position", "-447px 0px");
                break;
            case "-447px 0px":
                e.css("background-position", "-596px 0px");
                break;
            case "-596px 0px":
                e.css("background-position", "-745px 0px");
                break;
            case "-745px 0px":
                e.css("background-position", "-298px 0px");
            }
        }
        if (!i) return;
        n = setInterval(t, 50),
        $("html,body").animate({scrollTop: 0},"slow");
    });
});
</script>
</head>
<body>
<center>
<h2>jQuery火箭图标返回顶部代码</h2>
<h3>滚动滑动条后,查看右下角查看效果。很炫哦!!</h3>
</center>
<!-- 火箭 -->
<div style="display: none;" id="rocket-to-top">
    <div style="opacity:0;display: block;" class="level-2"></div>
    <div class="level-3"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.365jz.com/" target="_blank">365jz</a></p>
</div>
</body>
</html>

回到和返回顶部代码实例代码二:

1、html代码

<button class="back_to_top">返回顶部</button>

2、css代码

.back_to_top{
    position: fixed;
    bottom:30px;
    right: 30px;
    border:1px solid #888;
}

3、js代码

    var backButton=$('.back_to_top');
    function backToTop() {
        $('html,body').animate({
            scrollTop: 0
        }, 800);
    }
    backButton.on('click', backToTop);
 
    $(window).on('scroll', function () {/*当滚动条的垂直位置大于浏览器所能看到的页面的那部分的高度时,回到顶部按钮就显示 */
        if ($(window).scrollTop() > $(window).height())
            backButton.fadeIn();
        else
            backButton.fadeOut();
    });
    $(window).trigger('scroll');/*触发滚动事件,避免刷新的时候显示回到顶部按钮*/


要点:获取滚动条的垂直偏移,即当前页面顶端到整个页面顶端的距离   $(window).scrollTop() 或者$(document).scrollTop() ,但是前者更兼容

$(window).height()   获取当前浏览器窗口的大小,浏览器拉伸大小就会变

$(document).height()  获取整个文档的高度


回到和返回顶部代码实例代码三

html中直接使用设置锚点,即将a标签的herf设成要定位到的位置上的元素的id。

    定位到div id="pos",则给一个a标签

<a href="#pos"></a>

 

回到和返回顶部代码实例代码四


示例如下:


<script>
$(function(){
 $(".return").click(function() {
 $("html,body").animate({scrollTop:0}, 500);
 });
})
</script>


回到和返回顶部代码实例代码五


JS返回顶部实例代码,供大家参考,具体内容如下

html/css部分

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script src="返回顶部效果.js"></script>
<style>
 .container{
 width:1190px;
 margin: 0px auto;
 }
 .container a{
 display: none;
 width:40px;
 height:40px;
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 position: fixed;
 left:95%;
 bottom: 50px;
 }
 .container a:hover{
 background: url(/535e0dc100010e9c00400080.jpg) no-repeat;
 background-position: left -40px;
 }
</style> 
</head>
<body>
 <div>
 <img src="/535e0ce800015b7511902787.jpg" alt="">
 <a id="btn" href="javascript:" title="回到顶部"></a>
 </div>
</body>
</html>

JS部分

window.onload=function(){
 var obtn=document.getElementById("btn");
 var clientHeight=document.documentElement.clientHeight||ocument.body.clientHeight;
 var isTop=true;
 var timer=null;
 window.onscroll=function(){
 var topH=document.documentElement.scrollTop||document.body.scrollTop;
 if(topH>clientHeight){
  obtn.style.display="block";
 }else{
  obtn.style.display="none";
 }
 }
 obtn.onclick=function(){
 timer=setInterval(function(){
  var topH=document.documentElement.scrollTop||document.body.scrollTop;
  var stepLength=Math.ceil(topH/5);
  document.documentElement.scrollTop=document.body.scrollTop=topH-stepLength;
  if(topH==0){
  clearInterval(timer);
  }
 },30);
 }
}


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (129人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------