如果你想讓你的網站更加的動態有趣,那么一個置頂動態火箭絕對會吸引眼球。在HTML中,很容易實現這個效果,下面我們來介紹如何實現這個動畫效果。
<script type="text/javascript"> $(function() { $('a[href*=#], area[href*=#]').click(function() { var id = $(this).attr('href'); var position = $(id).offset().top; if (id == '#') { $('html, body').animate({scrollTop:0}, 'slow'); } else { $('html, body').animate({scrollTop:position}, 'slow'); } return false; }); $(window).scroll(function() { if ($(this).scrollTop() >100) { $('#rocket').fadeIn(); } else { $('#rocket').fadeOut(); } }); }); </script> <p>在HTML頁面中,引入上述JavaScript代碼,并在頁面中加入對應的HTML元素:</p> <div id="rocket"><p><a href="#"><img src="http://www.jqueryfuns.com/img/rocket.png" alt="回到頂部"></a></p></div>加上以上HTML和JavaScript代碼后,你的網頁就可以看到一個帶著火箭動畫的置頂按鈕了。
值得注意的是,在JavaScript代碼中,我們通過給指定元素添加點擊事件,通過判斷點擊元素的href屬性來實現向上滾動和回到頂部的功能。另外,我們還添加了一個滾動事件來控制置頂按鈕的出現和隱藏。當用戶滾動頁面超過100px時,我們就讓置頂按鈕逐漸顯示出來,反之隱藏。
為了讓代碼更加清晰,我們使用了jQuery庫。在此之前需要先在HTML頁面中引入jQuery庫。
上一篇vue工程下載依賴