仿新浪微博回頂端的jquery實作碼_jquery
在web頁面中,如果頁面較高,為了方便使用者快速地回到頂部,都會新增一個回到頂部按鈕。
其中淘寶網的是要滾動條的滾動距離大於某一段距離才顯示返回頂部按鈕;人人網的返回頂部直接在底部的工具條上;新浪微博的返回頂部在滾動高度大於0的時候顯示,且回到頂部的效果是平滑動畫效果。本文的實現就是類似新浪微博的這種效果。
二、jQuery下的回頂端功能
您可以狠狠地點選這裡:jQuery下的回頂端demo
可以看到,如果頁面有滾動高度,右下角就會有一個含有“返回頂部”字樣的黑色背景半透明的小條條,如下圖所示:
點擊這裡“返回頂部「字樣的按鈕後,頁面就像是抹了潤滑劑一樣,倏地一聲就滑到頂部了,同時,該點擊按鈕也玩起了躲貓貓– 不見了。
實現的原理嘛,恩……估計鮮有人關心,所以我也懶得浪費口水了,直接上代碼。
無論是這裡的jQuery實作還是MooTools實現,下面的CSS程式碼都是一致的,如下:
CSS程式碼:
.backToTop {
display: none;
width: 18px;
line-height: 1.2 background-color: #000;
color: #ff;
font-size: 12px;
text-align: center;
position: fixed;
text-align: center;
position: fixed;
_position: absolute;
right: 10px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: pointer;
opacity: .6;
}
複製程式碼
複製碼
(function() {
var $backToTopTxt = "回頂端", $backToTopEle = $('').appendTo($ ("body"))
.text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
$("html, body").animate({ scrollTop: 0 }, 120);
}), $backToTopFun = function() {
var st = $(document).scrollTop(), winh = $(window).height();
(st > 0)? $backToTopEle.show(): $backToTopEle.hide();
//IE6下的定位
$backToTopEle.css("top", st winh - 166);
} }; $(window).bind("scroll", $backToTopFun);
$(function() { $backToTopFun(); });
})();
三、MooTools下回傳頂部功能實現
複製程式碼
程式碼如下:
(function() {
(function() {
var $backToTopTxt = "返回頂部", $backToTopEle = new Element("div", {
"class": "backToTop",
title: $backToTopTxt
}).set("text", $backToTopTxt).addEvent("click", function() {
var st = document.getScroll().y, speed = st / 6;
var funScroll = function() {
st -= speed;
if (st window.scrollTo(0, st);
if (st > 0) { setTimeout(funScroll, 20); }
};
funScroll();
}).inject(document.body), $backToTopFun = function() {
var st = document.getScroll().y, winh = window.getSize( ).y;
(st > 0)? $backToTopEle.setStyle("display", "block"): $backToTopEle.setStyle("display", "none");
直接拷貝上面的程式碼在您的JS程式碼中就輕鬆實現效果啦。
MooTools的動畫方法Fx不支援捲動,要實現捲軸的平滑滾動效果需要使用Fx.Scroll插件。但是,顯然, 這裡的簡單功能沒有必要再使用額外的插件,所以直接設定了個定時器實現了平滑滾動效果。
註:demo頁面中的美女圖片作用是撐開頁面高度使產生捲軸。
四、結語
其實實作頁面回傳頂部效果最簡單的就是a標籤然後href屬性值直接就是#錨點就ok了。但是這種方法會在url位址後面產生一個”#”。關於錨點相關的內容您可以參考我之前的「關於錨點跳轉及jQuery下相關操作與插件」一文。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

學習JavaScript不難,但有挑戰。 1)理解基礎概念如變量、數據類型、函數等。 2)掌握異步編程,通過事件循環實現。 3)使用DOM操作和Promise處理異步請求。 4)避免常見錯誤,使用調試技巧。 5)優化性能,遵循最佳實踐。

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異,並解釋其背後的原因。 �...

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...
