本站同款返回顶部代码

本站同款返回顶部的代码touhou

• HTML代码

  <!--返回顶部-->
  <a id="rocket" href="#top" 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'; // 其他情况下隐藏图片
    }
  });