jQuery可变透明度返回顶部代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可变透明度返回顶部代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery可变透明度返回顶部代码，属于站长常用代码" />
<title>jQuery可变透明度返回顶部代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/lrtk.js"></script> 
</head>
<body>
<!-- 代码 开始 -->
<header>
    <h1>jQuery可变透明度返回顶部代码</h1>
    <p>向下拉动滚动条查看效果，超过1200像素，注意按钮的透明度~</p>
</header>
<main class="cd-container">
    <div style="text-align:center;margin:50px 0">
    <p><p>jQuery可变透明度返回顶部代码，如果向下滚动超过1200像素，按钮的透明度会下降，减少视觉干扰，更便于浏览内容主体，非常贴心的用户体验，兼容主流浏览器，程序员设计师联盟淘宝店推荐下载！</p><p><br /></p><p>使用方法：</p><p>1、在head区域引入样式表文件lrtk.css</p><p>2、在head区域引入jquery.min和lrtk.js，注意引入的先后顺序</p><p>3、在你的网页中加入&lt;!-- 代码 开始 --&gt;&lt;!-- 代码 结束 --&gt;注释区域代码即可。</p></p>
    <p style="margin:20px 0"></p>
    </div>
</main>
<a href="#0" class="cd-top">Top</a>
<!-- 代码 结束 -->
</body>
</html>

JS代码(lrtk.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');
}
}
);
	//smooth scroll to top$back_to_top.on('click',function(event){
	event.preventDefault();
	$('body,html').animate({
	scrollTop:0,}
,scroll_top_duration);
}
);
}
);

CSS代码(lrtk.css):

/* --------------------------------Primary style-------------------------------- */
html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{font-size:100%;font-family:"Bitter",sans-serif;color:#f5f4ed;background-color:#795d6b;}
a{color:#e86256;text-decoration:none;}
/* --------------------------------Modules - reusable parts of our design-------------------------------- */
.cd-container{width:90%;max-width:768px;height:3000px;margin:2em auto;display:block}
.cd-container::after{/* clearfix */
 content:'';display:table;clear:both;}
/* --------------------------------Main components-------------------------------- */
header{background:#5c4751;height:100px;text-align:center;}
header h1{font-size:20px;font-size:1.25rem;font-weight:bold;font-family:"Open Sans",sans-serif;text-transform:uppercase;font-weight:bold;padding-top:1.6em;margin-bottom:.2em;}
header p{font-size:13px;font-size:0.8125rem;color:#957484;}
@media only screen and (min-width:1024px){header{height:200px;}
header h1{font-size:30px;font-size:1.875rem;padding-top:2.6em;}
}
main p{font-size:14px;font-size:1rem;line-height:22px;}
@media only screen and (min-width:1024px){main p{font-size:14px;font-size:1rem;}
}
.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;}
}

附件:下载该文件资源,减少时间成本(增值服务)