本文內容相當簡單,所以沒有發布到首頁,如果你不幸看到,那只能是我這篇文章的榮幸,謝謝你的大駕光臨~(本部落格返回頂部的功能就使用的是這個元件)
由於思路跟**都很簡單,所以就直接貼出實現細節了:
var backtop = function呼叫方式:(dome,distance) ,100);
dome.onclick = function
();
function
toggledome()
function
throttle(func, wait) , wait);}}
};
<之所以寫這篇部落格,弄這麼個簡單的東西,有兩個方面的原因:script
>
newbacktop(document.getelementbyid(
'backtop'))
script
>
1)這段時間一直在手寫一些常見的簡單元件,這算是乙個簡單中更簡單的乙個,為了讓這系列的部落格更加完整,所以把這個元件補充了進來;
2)我想表達自己在工作過程中的乙個觀點:就是不要過渡用使用者體驗來裝飾你的軟體或者說產品,使用者體驗這個東西說白了就是兩個詞,乙個是好印象,第二個就是好玩,但這並不是產品開發運營的最終目的,你把東西做的再漂亮,產品的核心價值和服務做的不夠的話,就算把返回頂部這種功能做成超級無敵的火箭也是徒勞無功的。做前端開發,得鍛鍊點控制產品經理瞎提使用者體驗功能的度,以這個元件來說,我認為做加速或減速效果都是多餘的,既增加開發時間,又耽誤使用者使用的時間,拋棄自己心中那點對技術玩弄的固執,可以讓自己的工作做的更加完美。
最後,還是非常感謝你把它看完:)
補充於2016-03-16:
var backtop = function補充於2016-03-18:(dome, distance) ;
} else
if (typeof el.attachevent === 'function') ;
} else
; };
}addlistener(dome, type, fn);
}addlistener(window, 'scroll', throttle(function
() , 100));
addlistener(dome, 'click', function
() )
function
toggledome()
function
throttle(func, wait) , wait);}}
};
以上**中有一處可以進一步簡化:
可以改成:
addlistener(dome, 'click', function() );
原生JS實現返回頂部功能
當你點選 返回頂部 按鈕,頁面會自動滾動到頂部,這種做法被許多 採用 之前我用jquery實現了返回頂部功能 見jquery實現鏈結 並在許多專案中使用了這個jquery版本實現。但最近我將注意力轉向了 效能方面,試圖提高頁面的載入速度。其中最大的改進便是移除了jquery依賴改用原生js實現 返回...
js實現返回頂部功能的解決方案
很多 上都有返回頂部的效果,主要有如下幾種解決方案。window.scrollto x coord,y coord window.scrollto 0,0 生硬版 var scrolltotop window.setinterval function else 16 how fast to scro...
用js實現簡單的點選返回頂部效果
當頁面特別長的時候,使用者想回到頁面頂部,必須得滾動好幾次滾動鍵才能回到頂部,如果在頁面右下角有個 返回頂部 的按鈕,使用者點選一下,就可以回到頂部,對於使用者來說,是乙個比較好的體驗。實現原理 當頁面載入的時候,把元素定位到頁面的右下角,當頁面滾動時,元素一直位於右下角,當使用者點選的時候,頁面回...