jquery實(shí)現(xiàn)的鼠標(biāo)下拉滾動(dòng)置頂效果
更新時(shí)間：2014年07月24日 11:47:33 投稿：whsnow
鼠標(biāo)下拉滾動(dòng)置頂效果想必大家在瀏覽網(wǎng)頁時(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)琴菜單、層級菜單、置頂菜單、無縫滾動(dòng)效果
- JQuery插件iScroll實(shí)現(xiàn)下拉刷新，滾動(dòng)翻頁特效
- js/jquery獲取瀏覽器窗口可視區(qū)域高度和寬度以及滾動(dòng)條高度實(shí)現(xiàn)代碼
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁示例
- jQuery創(chuàng)建平滑的頁面滾動(dòng)(頂部或底部)
- js，jquery滾動(dòng)/跳轉(zhuǎn)頁面到指定位置的實(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)文章
ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)
這篇文章主要介紹了ashx文件獲取$.ajax()方法發(fā)送的數(shù)據(jù)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
下面小編就為大家?guī)硪黄褂肑Q完成表格隔行換色的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
Jquery的基本對象轉(zhuǎn)換和文檔加載用法實(shí)例
這篇文章主要介紹了Jquery的基本對象轉(zhuǎn)換和文檔加載用法,實(shí)例分析了Jquery的基本對象轉(zhuǎn)換及文檔加載使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
jquery中$(#form :input)與$(#form input)的區(qū)別
本節(jié)為大家介紹下jquery 中$(#form :input)與$(#form input)的區(qū)別,需要的朋友可以參考下2014-08-08
接下來將從前臺(tái)提交查詢條件，從MSSQL返回json數(shù)據(jù)的一個(gè)事例來講解一下datagrid動(dòng)態(tài)查詢數(shù)據(jù)，感興趣的你可不要錯(cuò)過了哈，希望本文可以幫助到你2021-09-09
jQuery的易擴(kuò)展性吸引了來自全球的開發(fā)者來共同編寫jQuery插件。jQuery插件不僅能夠增強(qiáng)網(wǎng)站的可用性，有效地改善用戶體驗(yàn)，還可以大大減少開發(fā)時(shí)間?，F(xiàn)在的jQuery插件很多，可以根據(jù)您的項(xiàng)目需要來選擇。這里為您介紹20款非常不錯(cuò)的插件。2011-02-02
jQuery+HTML5+CSS3制作支持響應(yīng)式布局時(shí)間軸插件
這篇文章主要為大家詳細(xì)介紹了JQuery+HTML5+CSS3制作時(shí)間軸,支持響應(yīng)式布局時(shí)間軸插件，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了jquery手風(fēng)琴特效插件,效果非常棒，需要的朋友可以參考下2015-02-02
這篇文章主要介紹了簡單的jQuery banner圖片輪播實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery在現(xiàn)在的Web開發(fā)項(xiàng)目中扮演著重要角色，jQuery讓網(wǎng)站有更好的可用性和用戶體驗(yàn)，讓訪問者對網(wǎng)站留下非常好的印象。2011-04-04