侧边栏壁纸

本站同款返回顶部代码

2024年03月16日 136阅读 0评论 1点赞

本站同款返回顶部的代码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'; // 其他情况下隐藏图片
      }
    });
1
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
说辞
坚持每天来逛逛,会让你
生活也美好了!
心情也舒畅了!
走路也有劲了!
腿也不痛了!
腰也不酸了!
工作也轻松了!
你好我也好,不要忘记哦!
舔狗日记