HTMl页面中返回顶部的几种实现小结

最近在开发网站需要制作返回顶部按钮,但是我主要为后端开发,对前端不太熟练,经过网上资料查询,制作出了返回顶部的按钮,下面是两种简单的方式,记录一下.喜欢本网站的朋友可以收藏下,会不定期更新学习资料.

第一种:引用外部jquery

新建HTML页面,将下面代码复制保存,通过浏览器打开,即可看到效果.

!doctyPE html>
    html lang="en">
    head>
    meta charset="UTF-8">
    tITle>
    doc/title>
    style>
    .arrow{
            border: 9px solid transparent;
            border-bottom-color: #3DA0DB;
            width: 0px;
            height: 0px;
        top:0px    }
    .stick{
            width: 8px;
            height: 14px;
            border-radius: 1px;
            background-color: #3DA0DB;
            top:15px;
    }
    #back_top div{
            position: absolute;
            margin: auto;
            right: 0px;
            left: 0px;
    }
    #back_top{
            background-color: #dddddd;
            height: 38px;
            width: 38px;
            border-radius: 3px;
            display: block;
            cursor: pointer;
            position: fixed;
            right: 50px;
            bottom: 100px;
            display: none;
    }
    /style>
    /head>
    body>
    div id="article">
    /div>
    div id="back_top">
    div class="arrow">
    /div>
    div class="stick">
    /div>
    /div>
    script src="http://cdn.statiCFile.org/jquery/1.11.1-rc2/jquery.min.js">
    /script>
    script>
$(function(){
        for(VAR i =0 ;
    i 100;
i++){
            $("#article").append("p>
    xxxxxxxxxxbr>
    /p>
")    }
}
    )/script>
    script>
$(function(){
    $(window).scroll(function(){
      //只要窗口滚动,就触发下面代码        var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
     //获取滚动后的高度        if( scrollt >
200 ){
      //判断滚动后高度超过200px,就显示            $("#back_top").fadeIn(400);
 //淡入        }
else{
                $("#back_top").stop().fadeOut(400);
 //如果返回或者没有超过,就淡出.必须加上stop()停止之前动画,否则会出现闪动        }
    }
    );
    $("#back_top").click(function(){
 //当点击标签的时候,使用aniMATE在200毫秒的时间内,滚到顶部        $("html,body").animate({
scrollTop:"0px"}
    ,200);
    }
    );
 }
    );
    /script>
    /body>
    /html>
    

第二种:使用css及特殊图标进行设置

全代码打造简洁美观回到顶部按钮,同上,将代码复制进HTML文件中,打开即可看到效果.

!doctype html>
    html lang="en">
    head>
    meta charset="UTF-8">
    title>
    doc/title>
    style>
    #back_top{
         display:block;
          width:60px;
         height:60px;
        position:fixed;
          bottom:50px;
          right:40px;
         border-radius:10px 10px 10px 10px;
           text-decoration:none;
          display:none;
          background-color:#999999;
         }
    #back_top span{
             display:block;
             width:60px;
             color:#dddddd;
             font-Size:40px;
             text-align:center;
             margin-top:4px;
    }
     #back_top span:hover{
             color:#cccccc;
     }
     /style>
    /head>
    body>
    div id="article">
    /div>
    a id="back_top" href="script:;
    ">
         span>
    ⌆/span>
     /a>
    /div>
    script>
$(function(){
        for(var i =0 ;
    i 100;
i++){
            $("#article").append("p>
    xxxxxxxxxxbr>
    /p>
")    }
}
    )/script>
    script>
$(function(){
    $(window).scroll(function(){
      //只要窗口滚动,就触发下面代码         var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
     //获取滚动后的高度         if( scrollt >
200 ){
      //判断滚动后高度超过200px,就显示              $("#back_top").fadeIn(400);
 //淡出             }
else{
                      $("#back_top").stop().fadeOut(400);
 //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动           }
    }
    );
    $("#back_top").click(function(){
 //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部            $("html,body").animate({
scrollTop:"0px"}
    ,200);
    }
    );
}
    );
    /script>
    /body>
    /html>
    

以上两种方式仅提供思路,直接使用也可,具体想要的图标可自己调试，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！