1. 程式人生 > >chrome瀏覽器頁面獲取綁定返回頂部動畫事件插件

chrome瀏覽器頁面獲取綁定返回頂部動畫事件插件

var posit 加載 else lin ott repeat 插件 hover

在chrome瀏覽器下頁面加載:

var top = $("body").scrollTop() ;

console.log(top) // 事件監聽無效

var top = $("html").scrollTop();

console.log(top) // 事件監聽無效

var top = $(document).scrollTop();

console.log(top) // 事件監聽無效

在瀏覽器窗口滾動事件監聽下

$(window).scroll(function(){

var top = $("body").scrollTop() ;

console.log(top) ; // 事件監聽到滾動次數,沒有值,默認0;

var top = $("html").scrollTop();

console.log(top) ; // OK,值從1開始

var top = $(document).scrollTop();

console.log(top) ; // OK,值從1開始

}

ui-backTop返回頂部插件

ui.scss

.ui-backTop{
display:none;
position:fixed;


right:2%;
bottom:10px;
z-index:9;
width:35px;
height:35px;
border-radius:50%;
background:url(../img/icon-go-up.png) center no-repeat rgba(142,223,243,0.8);
&:hover{
background:rgba(142,223,243,0.4);
color:#00b3ea;
// font-weight:600;
}
&:hover:after{
content:"頂";
display:block;
line-height:35px;
text-align:center;
font-size:20px;
}
}

ui.js

$.fn.UiBackTop = function(){
var ui = $(this);
var el = $("<a href=‘#‘ class=‘ui-backTop‘></a>");
var windowHeight = $(window).height();
ui.append(el);
$(window).scroll(function(){
var top = $("html").scrollTop();
if(top > windowHeight||top>100){
el.show();
}else{
el.hide();
}
});
el.click(function(){
if ($("html").scrollTop()) {
$("html").animate({ scrollTop: 0 }, 1000); //在點擊事件函數內 console.log($("html").scrollTop()) 有值?
return false;
};
});
}

雖然插件功能實現,但作為新手的我還是留下疑問,標紅字體的問題歡迎大家交流,謝謝!

chrome瀏覽器頁面獲取綁定返回頂部動畫事件插件