首頁 > web前端 > js教程 > 主體

原生js實現淘寶首頁點擊按鈕緩慢回到頂部效果_javascript技巧

WBOY
發布: 2016-05-16 16:53:10
原創
1762 人瀏覽過

淘寶首頁的回到頂部按鈕是這樣的:下拉到一定距離後按鈕才顯示出來,滑鼠放到按鈕上時,按鈕背景會變成灰色,並且圖示變成了文字。點擊按鈕緩慢回到頂部

我們先分析下實現這樣的效果需要添加哪些事件。滑鼠移進移出按鈕,按鈕表現發生變化,所以需要為按鈕新增mouseover, mouseout事件。要偵聽捲軸的變化,所以需要為window新增scroll事件,點選按鈕回到頂部,按鈕新增click事件。我們將事件處理程序封裝成三個函數moveIn, moveOut, goTop;

下面先給出html/css代碼

複製代碼 程式碼如下:


頭部

主要內容,高度是2000px

回頂端



複製程式碼 程式碼如下:.content { height: 2000px; border: 1px solid blue; }
#btn {
position:fixed; 🎜>bottom: 50px;
right: 0;
width: 54px;
height: 55px;
background: url(icons.png) no-repeat 0 -110px; } //背景圖可隨意找
font-size: 12px;
line-height: 55px;
text-align: center;
text-indent: -9999em;
cursor:pointer;
display: none;


以下是完整的js程式碼



複製程式碼複製程式碼



複製程式碼



複製程式碼


程式碼如下


window.addEventListener("load",function() {
var btn = document.getElementById("btn");
btn.addEventListener("mouseover",moveIn, false );
btn.addEventListener("mouseout", moveOut, false);

function moveIn() {
btn.style.color = "#ffffff"; //修改的是內聯樣式,具有最高的優先權;
btn.style.textIndent = "0em";
btn.style.backgroundImage = "none";
btn.style.backgroundColor = "#FF4401";
}
function moveOut() {
btn.style.textIndent = "-9999em";
btn.style.backgroundImage = "url(icons.png)";
}

function goTop(acceleration, time) { //修改參數可調整回頂端的速度
acceleration = acceleration || 0.1;
time = time || 10;
var speed = 1 eleration; 🎜>function getScrollTop() { //取得捲軸的垂直距離
return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) { //設定滾動設定條的垂直距離,實現效果的關鍵就是在很短的間隔時間內不斷地修改​​滾動條的垂直距離,以實現滾動效果
document.documentElement.scrollTop = value;
document.body. scrollTop = value;
}
window.onscroll = function() {
var scrollTop = getScrollTop();
if (scrollTop > 100) { //判斷距離視窗頂部多遠時捲動條距離視窗頂部多遠時顯示出來,這裡是100px
btn.style.display = "block";
} else {
btn.style.display = "none";
}
};
btn.onclick = function () {
var timer = setInterval(function() {
setScrollTop(Math.floor(getScrollTop() / speed)); //這行程式碼是關鍵,取得捲軸垂直距離,除以speed後再給滾動條設定垂直距離
if (getScrollTop() == 0) clearInterval(timer); }, time); }; } goTop(0.2, 8); }, false);

當然,還有其他的實作方法,下面給出其他方法的關鍵程式碼




複製程式碼


程式碼如下:


btn.onclick = function() {
clearInterval(timer)
var timer = setInterval(function() { var now = scrollTop; //滾動條垂直距離speed = (0 - now) / 10; speed = Math.floor(speed) ; if (now == 0); clearInterval(timer); document.documentElement.scrollTop = now speed; //標準模式下的瀏覽器document.body.scrollTop = now speed; //怪異模式下的瀏覽器}, 15); }
原生js實現淘寶首頁點擊按鈕緩慢回到頂部效果_javascript技巧 
這裡的程式碼主要還是參考了網路上其他資源,再加了一點自己的理解。當然還有其他實作方法,例如JavaScript最早時間就支援的window.scrollTo()。用jQ來實現的話代碼量將會變得很少,可參考w3cplus

個人覺得,先學好原生JavaScript,比如搞清楚資料類型,閉包,繼承,作用域,DOM,CSS,事件處理,Ajax等,用熟練後學習其他框架將會容易很多。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板