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;
};
});
}
虽然插件功能实现,但作为新手的我还是留下疑问,标红字体的问题欢迎大家交流,谢谢!