網頁新增"回網頁頂端"
(參考:網頁Top按鈕 (網頁回到頂端)，純 CSS+jQuery 免圖片)
1.
在網頁<head></head>加入
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
在網頁<body</body>加入
<script src="jquery.min.js"></script>
<button type="button" id="BackTop" class="toTop-arrow"></button>
<script>
$(function(){
$('#BackTop').click(function(){
$('html,body').animate({scrollTop:0}, 333);
});
$(window).scroll(function() {
if ( $(this).scrollTop() > 300 ){
$('#BackTop').fadeIn(222);
} else {
$('#BackTop').stop().fadeOut(222);
}
}).scroll();
});
</script>
2.
複製下列CSS 內容，另存style.css到網頁同目錄下。(參考:CSS 基本 - 學習該如何開發 Web | MDN)
/* 40px */
.toTop-arrow {
width: 2.5rem;
height: 2.5rem;
padding: 0;
margin: 0;
border: 0;
border-radius: 33%;
opacity: 0.6;
background: #111;
cursor: pointer;
position:fixed;
right: 1rem;
bottom: 1rem;
display: none;
}
.toTop-arrow::before, .toTop-arrow::after {
width: 18px;
height: 5px;
border-radius: 3px;
background: #e81;
position: absolute;
content: "";
}
.toTop-arrow::before {
transform: rotate(-45deg) translate(0, -50%);
left: 0.5rem;
}
.toTop-arrow::after {
transform: rotate(45deg) translate(0, -50%);
right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}
3.複製下列jQuery 內容，另存jquery.min.js到網頁同目錄下。(參考:jQuery 3.3.1)
Download jQueryv3.3.1
完成
[ add comment ] | permalink | print article |
( 3 / 15 )
Random Entry