typecho 返回顶部和解决和懒加载冲突的问题

admin

撰写于 2023年 05月 16 日

懒加载是接上一篇文章来解决的 https://www.ishiguang.cn/18668.html

之前怎么调试都不行，后来发现增加 var oTop; // 将变量定义为全局变量然后就解决问题了，

希望能帮到你~！

首先给出一个解决的JS

var oTop; // 将变量定义为全局变量

function scrollToTop(){
  $("html, body").animate({scrollTop: oTop}, 500);
}

$(function(){
  var lazyloadImg = document.querySelectorAll('img[data-src]');

  function isImgLoad(cb){
    var imgList = Array.prototype.slice.call(lazyloadImg);
    var timeId = setInterval(function(){
      for(var i=0;i<imgList.length;i++){
        if(loadOver(imgList[i])){
          imgList.splice(i,1);
          i--;
        }
      }
      if(imgList.length==0){
        clearInterval(timeId);
        cb();
      }
    },500);
  }
  function loadOver(img){
    return img.complete||img.width+img.height>0;
  }

  $(window).on("scroll", function(){
    var currentHeight=$(document).scrollTop();
    if(currentHeight>300){
      $("#backtop").fadeIn();
    }else{
      $("#backtop").fadeOut();
    }
  });
  oTop=0; // 对全局变量进行初始化
  if(lazyloadImg.length===0){
    $('#backtop').on('click', scrollToTop);
  }else{
    isImgLoad(function(){
      $('#backtop').on('click', scrollToTop);
    });
  }
});

CSS的样式

 #top {
 height: 2000px;
 background-color: #999
 }

 #backtop {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 30px;
 background-color: #fff;
 z-index: 9;
 }

最后是HTML

<div id="backtop">
        
        <a onclick="scrollToTop()">回到顶部</a>
    </div>