1、在页面（html）
里加上a标签（返回顶部超链接）
Top
登录后复制
2、添加css样式（可以写在页面里，也可以写在单独的css样式表里）
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}.cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1;}.cd-top.cd-fade-out { /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */ opacity: .5;}.no-touch .cd-top:hover { background-color: #e86256; opacity: 1;}@media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; }}@media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; }}
登录后复制
3、加入js代码（加入js前，一定要先引用jquery库，否则会失效）
登录后复制
$(document).ready(function($){// browser window scroll (in pixels) after which the "back to top" link is shownvar offset = 300,//browser window scroll (in pixels) after which the "back to top" link opacity is reducedoffset_opacity = 1200,//duration of the top scrolling animation (in ms)scroll_top_duration = 700,//grab the "back to top" link$back_to_top = $('.cd-top');//hide or show the "back to top" link$(window).scroll(function(){( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');if( $(this).scrollTop() > offset_opacity ) { $back_to_top.addClass('cd-fade-out');}});//www.sucaijiayuan.com//smooth scroll to top$back_to_top.on('click', function(event){event.preventDefault();$('body,html').animate({scrollTop: 0 , }, scroll_top_duration);});});
登录后复制
以上就是使用JQUERY实现可变透明度返回顶部效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3122077.html
