使用JQUERY实现可变透明度返回顶部效果

<a href="#0" class="cd-top">Top</a>

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库，否则会失效）

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

$(document).ready(function($){
	// browser window scroll (in pixels) after which the "back to top" link is shown
	var offset = 300,
	//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
	offset_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
	);
	});

});