jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
更新時(shí)間:2014年07月24日 11:47:33 投稿:whsnow
鼠標(biāo)下拉滾動(dòng)置頂效果想必大家在瀏覽網(wǎng)頁(yè)時(shí)都有遇到過,下面有個(gè)不錯(cuò)的小例子,需要的朋友可以參考下
$(function(){ //置頂按鈕顯示/隱藏實(shí)現(xiàn) $(window).scroll(function(){ var w_height = $(window).height();//瀏覽器高度 var scroll_top = $(document).scrollTop();//滾動(dòng)條到頂部的垂直高度 if(scroll_top > w_height){ $("#goto-top").fadeIn(500); }else{ $("#goto-top").fadeOut(500); } }); //置頂 $("#goto-top").click(function(e){ e.preventDefault(); $(document.documentElement).animate({ scrollTop: 0 },200); //支持chrome $(document.body).animate({ scrollTop: 0 },200); }); }) </script> <style type="text/css"> #goto-top { display:none; position:fixed; width:38px; height:36px; background:url(images/goto-top.png) no-repeat 0 0; bottom:40px; right:40px; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; transition:all 0.2s; z-index:9999; } #goto-top:hover { background:url(images/goto-top.png) no-repeat 0 -36px; } </style> </head>
您可能感興趣的文章:
- jQuery滾動(dòng)監(jiān)聽實(shí)現(xiàn)商城樓梯式導(dǎo)航效果
- jQuery實(shí)現(xiàn)可兼容IE6的滾動(dòng)監(jiān)聽功能
- 基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級(jí)菜單、置頂菜單、無縫滾動(dòng)效果
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新,滾動(dòng)翻頁(yè)特效
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- jQuery創(chuàng)建平滑的頁(yè)面滾動(dòng)(頂部或底部)
- js,jquery滾動(dòng)/跳轉(zhuǎn)頁(yè)面到指定位置的實(shí)現(xiàn)思路
- jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
- JS JQUERY實(shí)現(xiàn)滾動(dòng)條自動(dòng)滾到底的方法
- jQuery實(shí)現(xiàn)的監(jiān)聽導(dǎo)航滾動(dòng)置頂狀態(tài)功能示例
相關(guān)文章
jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)當(dāng)滑動(dòng)到一定位置時(shí)固定效果,需要的朋友可以參考下2014-06-06jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02jQuery輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼
下面小編就為大家?guī)硪黄猨Query輕松實(shí)現(xiàn)表格的隔行變色和點(diǎn)擊行變色的實(shí)例代碼。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過來看看吧2016-05-05使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)input數(shù)值增量和減量的方法,實(shí)例分析了Bootstrap TouchSpin插件的用法,是非常實(shí)用的技巧,需要的朋友可以參考下2015-01-01jQuery中toggle()函數(shù)的使用實(shí)例
關(guān)于jQuery中的toggle()函數(shù),相信大家都非常的了解,網(wǎng)上也有許多的相關(guān)教程,今天要給大家分享的是在實(shí)際的項(xiàng)目中toggle()的使用方法,需要的小伙伴可以參考下。2015-04-04淺談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法
下面小編就為大家?guī)硪黄獪\談jQuery this和$(this)的區(qū)別及獲取$(this)子元素對(duì)象的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11