返回頂部

<div class="g-cloent-right">
	<ul>
		<li>
			<a href="#top" id="goToTop">
				<img src="images/icon-top.png" class="imgs">
				<span>返回頂部</span>
			</a>
		</li>
	</ul>
<div>

/* js部分 */
    $(document).ready(function(){

        $("#goToTop"
 
).click(function() {
            $('body,html').animate({
                scrollTop: 0
            },
            8000);
            return false;
        });
        
    });

/* css部分 */
.g-client-right {
	position: fixed;
	right: 0;
	bottom: 250px;
	z-index: 9996;
	dispaly: block; /* 在手機屏時可設定none */
	min-width
 
: 195px;
}
.g-client-right li {
	position: relative;
	left: 120px; /* 減去a的寬度所得要隱藏的距離*/
	height: 70px;
	margin-bottom: 2px;
	box-sizeing: border-box;
	background: rgba(211,144,46,1);
	-webkit-transition: all .6s ease;
		    transition: all .6s ease;
}
.g-client-right li a {
	display: inline-block;
	float
 
: left;
	height: 100%;
	min-width: 75px;
	padding: 10px;
	text-align: center;
	color: #fff;
}
.g-client-right li .imgs {
	display: block;
	width: 30px;
	margin: 0 auto;
	line-height: 0;
	overflow: hidden;
}
.g-client-right li:hover {
	left: 110px; /* 減去a的寬度所得要移動顯示的距離*/
}