chrome瀏覽器頁面獲取繫結返回頂部動畫事件外掛
在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;
};
});
}
雖然外掛功能實現，但作為新手的我還是留下疑問，標紅字型的問題歡迎大家交流，謝謝！