可爱萝莉返回顶部代码教程

也想出现在这里？点击联系我~

也想出现在这里？点击联系我~

可爱萝莉返回顶部代码教程。需要引入jquery，网站有的就不用了，没有就引入

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

HTML代码

<!--返回顶部-->
<a id="rocket" href="#top" rel="external nofollow"  rel="external nofollow"  title="返回顶部"><i></i></a>

CSS代码

/*返回顶部*/
#BackToTop{
  position: fixed;
  bottom: -400px; /* 初始时图片在底部之外，以隐藏起来 */
  right: 0px;
  width: 100px;
  transition: bottom 0.5s; /* 添加过渡效果 */
}

JQuery代码

// 返回顶部
jQuery(function(){
  // 点击查看原图
  jQuery('.entry-content img').on('click', function(){
      window.open(jQuery(this).attr('src'));
  });
  // 链接在新标签页打开、nofollow
  jQuery('div[itemprop=articleBody] a').attr({'target':'_blank', 'rel':'nofollow'});
      // 随机生成右下角东方返回顶部
      var touhou = ['marisa', 'flandre', 'reimu'];
      i = Math.floor(Math.random()*touhou.length);
      jQuery('body').append('<img id="BackToTop" src="https://cache.cenguigui.cn/img/touhou/'+touhou[i]+'.png" title="返回顶部~">');
      jQuery('#rocket').remove();
      jQuery('#BackToTop').on('click', function(){
              jQuery('body,html').animate({ scrollTop: 0 }, 500);
      });
});
window.addEventListener('scroll', function() {
  var bottomRightImage = document.getElementById('BackToTop');
  var scrollY = window.scrollY || window.pageYOffset;
  var halfPageHeight = document.body.scrollHeight / 6;

  if (scrollY >= halfPageHeight) {
      bottomRightImage.style.bottom = '0px'; // 滚动超过页面一半时显示图片
  } else {
      bottomRightImage.style.bottom = '-400px'; // 其他情况下隐藏图片
  }
});

源码截图

可爱萝莉返回顶部代码教程