CSS
/*主题透明度*/ #home { margin: 0 auto; width: 90%; min-width: 950px; background-color: rgba(255, 255, 255, 0.7); padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.7); border-radius:10px; } /*菜单字体*/ #navigator{ font-size: 15px; } /*背景图*/ body { background-image: url(https://download-cdn.oss-cn-hangzhou.aliyuncs.com/img/2.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size: cover; } /*侧边栏透明度*/ .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory, .input_my_zzk, .Cal, .CalDayHeader, .CalTitle { background: rgba(255, 255, 255, 0); margin-bottom: 30px; word-wrap: break-word; } /*日期控件头部透明度*/ .CalTitle td{ background: rgba(255, 255, 255, 0)!important; } .CalNextPrev { text-align:center; } /*文章内代码块透明度*/ .cnblogs_code {background: rgba(255, 255, 255, 0)!important;} .cnblogs_code_toolbar {background: rgba(255, 255, 255, 0)!important;} .cnblogs_code_copy {background: rgba(255, 255, 255, 0)!important;} .cnblogs_code_toolbar {display:none;} /*昵称 评论区透明度*/ .author, .comment_textarea { background: rgba(255, 255, 255, 0); margin-bottom: 50px; word-wrap: break-word; } /*隐藏右侧常用链接,最新评论,评论排行榜*/ .catListLink, .catListComment, .catListFeedback{ display:none; } /*隐藏文章底部刷新,返回顶部按钮*/ #comment_nav { display:none; } /*文章底部昵称一栏的高度*/ #comment_form_container p { height: 30px; } /*文章评论区宽度*/ #comment_form_container .comment_textarea { width: 98%; height: 100px; } /*隐藏广告区*/ .c_ad_block, .ad_text_commentbox { display:none; } #ad_t2 { display:none; } /*隐藏谷歌搜索框*/ #widget_my_google { display:none; } /*本站搜索框高度*/ .div_my_zzk { height: 30px; } /* 推荐及反对 */ #div_digg,#footer{text-align:center} #div_digg{position:fixed;right:180px;bottom:20px;z-index:9999;background-color:#fff;font-size:12px;width:125px;margin:10px 0 0;padding:5px;border:1px solid #55895b;border-radius:5px} #div_digg{width:44px;bottom:105px} #div_digg .diggit{height:46px} #div_digg{right:5px} #div_digg,#scrollBtn {opacity:.55} /*回到顶部*/ .scrollBtn { background: url(//static.hdslb.com/images/base/icons.png); position: fixed; display: block; cursor: pointer; height: 48px; width: 48px; right: 8px; bottom: 50px; z-index: 9999; background-position: -648px -72px; background-color: #f6f9fa; border: 1px solid #e5e9ef; overflow: hidden; border-radius: 4px; } .scrollBtn:hover{ background: url("http://static.hdslb.com/images/base/icons.png" ); background-color:#00a1d6; background-position:-714px -72px; border-color:#00a1d6 }
JS
//trigger on window load window.onload = function () { var oscrollBtn = document.getElementById('scrollBtn'); var timer = null; var isTop = true; //get height of page var clientHeight = document.documentElement.clientHeight; //trigger on scroll move window.onscroll = function () { var osTop = document.documentElement.scrollTop || document.body.scrollTop; if (osTop >= clientHeight) { oscrollBtn.style.display = 'block'; } else { oscrollBtn.style.display = 'none'; } if (!isTop) { clearInterval(timer); } isTop = false; } oscrollBtn.onclick = function () { //set timer function timer = setInterval(function () { //get height of scroll to top var osTop = document.documentElement.scrollTop || document.body.scrollTop; //move quickly to slowly var ispeed = Math.ceil(osTop / 6); document.documentElement.scrollTop = document.body.scrollTop = osTop - ispeed; isTop = true; if (osTop == 0) { clearInterval(timer); } }, 30); } }
页脚HTML
<a href="javascript:;" id="scrollBtn" class="scrollBtn" title=""></a> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/yadongliang/goTop.js"></script>