為了更好的提高頁面的用戶體驗和需要的全站功能,老左博客在側邊增加了返回頂部的jQuery效果,同時加上訂閱、QQ群以及聯系到我個人的功能,方便能夠及時的找到我和提供需要的便捷服務(如果之前沒有可能需要從其他頁面找我)。在一定程度上有這樣的效果還是可以提高用戶體驗的(肯定與早期的漂浮對聯廣告不同)。
有幾個朋友看到老左增加這些效果之后希望把代碼放出來也需要使用,畢竟我也是找的網上的信息,然后進行適合自己的調整,同時還有其他幾款不錯的效果,于是就用此篇幅整理10款用戶體驗較好的返回頂部的jQuery演示及源碼,如果有需要的朋友可以下載且整合到自己的網站中使用。
第一、返回頂部+微博按鈕
老左的側邊返回頂部就是修改與這款效果,如果有需要和老左一樣效果的可以下載這個然后使用。[演示]
第二、仿騰訊返回頂部和建議
圖標比較大,也可以換成其他需要的圖標和鏈接功能。
第三、火箭式返回頂部
這款返回頂部比較絢麗,僅有返回上部的效果,頁面不止一屏之后點擊火箭圖標直接返回頂部,火箭圖標消失。[演示]
第四、多圖右下角
帶有購物車、客服以及反饋信息的鏈接圖標,我們如果有需要這樣的效果也可以更換其他圖標。[演示]
第五、在線客服式返回頂部
比較注重側邊在線客服效果的網站可以使用這款效果,比如企業網站等。
第六、帶有微信二維碼、上下滾動
帶有反饋功能圖標、二維碼微信、以及上、下滾動功能結合。
第七、Metro扁平風格
這款METRO風格比較適合醫療機構的網站使用。
網上關于這樣的返回頂部效果不止這幾個,不過都差不多,我們可以根據上面的圖標進行更換圖標來變化自己需要的效果。以上7款肯定有一款適合你的。