网页制作快速返回顶部代码及教程

我们在打开博客的时候，会发现很长的文章底部会出现一个快速返回顶部的按钮，点击此按钮网站会快速返回首页，看起来按钮特别炫，同时此按钮也可增加用户体验。当你把本页拉到最下方的时候，可以看到右下角有一个返回顶部的火箭头。这就是演示地址。

代码下载地址：点击下载

 

 

<!--css  js-->

<!--css: 层叠样式表，一件美丽的外衣-->

<!--内嵌样式-->

<style type="text/css">

*{margin:0px;padding:0px;}

/*以“.”开头的css样式称之为 类样式*/

/*.top{width:300px;height:100px;}*/

body{height:2150px; no-repeat top center;}

/*.top{width:31px;height:126px;}*/

#retop{background:url("https://www.ssffx.com/js/fh/top.png");width:31px;height:126px;display:block;

position:fixed;bottom:0;right:20px;display:none;

}

 

</style>

 

 

 

<!--div 层：盒子，容器-->

<!--以class="自定义名称" 称之为类样式-->

<a href="#" id="retop"></a>

<script type="text/javascript" src="https://www.ssffx.com/js/fh/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('<a href="#" id="retop"></a>').appendTo('body').fadeOut().click(function(){

$(document).scrollTop(0);

$(this).fadeOut();return false});

var $retop = $('#retop');

function backTopLeft(){

var btLeft = $(window).width() / 2 + 600;

if (btLeft <= 950){

$retop.css({ 'left': 955 })

}else{

$retop.css({ 'left': btLeft })}}backTopLeft();

$(window).resize(backTopLeft);$(window).scroll(function(){

if ($(document).scrollTop() === 0){

$retop.fadeOut()

}else{

$retop.fadeIn()}

if ($.browser.msie && $.browser.version == 6.0 && $(document).scrollTop() !== 0){$retop.css({ 'opacity': 1 })}

});

});

</script>