1.首先HTML部分請加在<body>內(wordpress則加在index.php與single.php)
<div id="gotop">˄</div>
2.CSS部分請加在您的css檔裡(wordpress則加在style.css)
#gotop {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
padding: 10px 15px;
font-size: 20px;
background: #777;
color: white;
cursor: pointer;
}
3.jQuery部分請加在您的css檔裡(wordpress則加在index.php與single.php)
<!-- Start 往頂部箭頭 Jquery碼//-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gotop").click(function(){
jQuery("html,body").animate({
scrollTop:0
},1000);
});
$(window).scroll(function() {
if ( $(this).scrollTop() > 300){
$('#gotop').fadeIn("fast");
} else {
$('#gotop').stop().fadeOut("fast");
}
});
});
</script>
CSS微調
如果你想要調整箭頭改成圖片.可以到CSS裡
background: #777;
改成
background-image:url(你的圖片.jpg);
background-repeat: no-repeat;
其他如果想要調成圓角背景則是參考一般CSS按鈕設定即可
border-radius: 50%;
沒有留言:
張貼留言