1、在頁面(HTML)<body></body>裡加上A標籤(返回頂部超連結)
<a href="#0" class="cd-top">Top</a>
2、添加css樣式(可以寫在頁面裡,也可以寫在單獨的css樣式表裡)
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}.cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1;}.cd-top.cd-fade-out { /* 如果使用者繼續向下滾動,這個按鈕的透明度會變得更低 */ opacity: .5;}.no-touch .cd-top:hover { background-color: #e86256; opacity: 1;}@media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; }}@media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; }}
3、加入js代碼(加入js前,一定要先引用jquery庫,否則會失效)
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
$(document).ready(function($){// browser window scroll (in pixels) after which the "back to top" link is shownvar offset = 300,//browser window scroll (in pixels) after which the "back to top" link opacity is reducedoffset_opacity = 1200,//duration of the top scrolling animation (in ms)scroll_top_duration = 700,//grab the "back to top" link$back_to_top = $('.cd-top');//hide or show the "back to top" link$(window).scroll(function(){( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('cd-fade-out');}});//www.sucaijiayuan.com//smooth scroll to top$back_to_top.on('click', function(event){event.preventDefault();$('body,html').animate({scrollTop: 0 , }, scroll_top_duration);});});