小火箭返回頂部
阿新 • • 發佈：2020-07-15
網頁中常常會有一個 返回頂部的功能，恰巧我這天寫到了，在網上找了一下思路，下面就寫了一個案例：
效果預覽：https://li_shang_shan.gitee.io/small_rocket_back_to_top。
程式碼就直接貼上了：
<html> <head> <meta charset="utf-8" /> <title>返回頂部外掛</title> </head> <style type="text/css"> body{ background: url(img/bg.jpg) 100%; text-align: center; } .bg_top{ width: 100px; height: 110px; position: fixed; right: 30px; bottom: 50px; display: none; } .bg_top img{ width: 100px; height: 110px; transition: all 1s ease 0s; cursor: pointer; opacity: 0.6; } .yun{ width: 300px; margin: 0 auto; } h4{ margin: 30px auto; font-size: 35px color: rgb(0,0,0); } </style> <body> <h4>往下滑動滾動條出現小火箭</h4> <img src="./img/yunceng.jpg" class="yun"> <div class="bg_top"> <img src="./img/小火箭.gif" > </div> <script src="./js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function () { var scroll_top = $(document).scrollTop(); if (scroll_top > 400) { //當向下滾動400px時,出現返回頂部連結 $(".bg_top").show(300); } else { $(".bg_top").hide(300); } }); $(".bg_top").click(function () { $("html,body").animate({scrollTop:0}, 1000); }); $(".bg_top img").hover(function(){ $(this).css({ "opacity":1, "width":"90", "margin-top":"10px", }); },function(){ $(this).css({ "opacity":0.6, "width":"100", "margin-top":"0", }); }); }); </script> </body> </html>
置頂的小火箭可以在網上找，或者去向量相簿下載，用個箭頭或者圖片代替都OK
個人學習，內容簡略。