亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

頁面中常見返回頂部總結(jié)

??? 2018-12-30 21:58:58 167
????：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>點(diǎn)擊回到頂部</title> <link rel="stylesheet" type="text/css& 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>點(diǎn)擊回到頂部</title>
	<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="icon" type="image/x-icon" href="static/images/icon.ico" />
    <link rel="stylesheet" type="text/css" href="static/style4.css">
    <script type="text/javascript" src="static/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    	$(function(){
            $(window).scroll(
                function(){
                  if($(window).scrollTop()>150){
                    $('.backTop').fadeIn(1000)
                  }else{
                    $('.backTop').fadeOut(1000)
                  }
                })
        })
    </script>
</head>
<body>
	<a href="" id="backTop"></a>
    <div class="bcground">
    	<a href="#backTop"><div class="backTop"><span class="fa fa-arrow-circle-up"></span><br>返回頂部</div></a>
    </div>
</body>
</html>
*{margin: 0px;padding: 0px;}
.bcground{width: 1200px;height: 2000px; margin: 0px auto;background: #ccc;}
.backTop{width: 50px;height: 30px; background: #B7B4B4;position: fixed;bottom: 100px;right: 20px;font-size: 10px;text-align: center;border-radius: 2px;display: none;}
a{color: #fff;text-decoration: none;}
.fa-arrow-circle-up{margin-top: 3px;}

利用if判斷，以scrollTop()計(jì)算滾動(dòng)條到瀏覽器窗口到頂部的距離為條件，實(shí)現(xiàn)fadeIn(）/fadeOut()效果

QQ圖片20181230215812.png


?? ???：天蓬老師?? ??：2018-12-31 16:18:04
???? ??：返回頂部, 是一直非常常用的功能, 有很多種實(shí)現(xiàn)方案, 你的這個(gè)方案很不錯(cuò),掌握一種,并熟悉它就可以了

??? ??

?? ??