在 Chrome 浏览器下页面加载:
- var top = $("body").scrollTop() ;
- console.log(top) // 事件监听无效
- var top = $("html").scrollTop();
- console.log(top) // 事件监听无效
- var top = $(document).scrollTop();
- console.log(top) // 事件监听无效
在浏览器窗口滚动事件监听下
- $(Windows).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 = $(Windows).height();
- ui.append(el);
- $(Windows).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;
- };
- });
- }
虽然插件功能实现, 但作为新手的我还是留下疑问, 标红字体的问题欢迎大家交流, 谢谢!
来源: https://www.cnblogs.com/zmc66/p/9821147.html