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


                 

: 2015-08-22 10:28:16

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

<!--css js-->
<style type="text/css">
*{margin:0pxpadding:0px}
/*.top{width:300pxheight:100px}*/
body{height:2150px no-repeat top center}
/*.top{width:31pxheight:126px}*/
#retop{background:url("https://www.ssffx.com/js/fh/top.png")width:31pxheight:126pxdisplay:block
position:fixedbottom:0right:20pxdisplay:none
}
</style>
<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>

<!--css js-->
<!--css: 层叠样式表,一件美丽的外衣-->
<!--内嵌样式-->
<style type="text/css">
*{margin:0pxpadding:0px}
/*以&ldquo.&rdquo开头的css样式称之为 类样式*/
/*.top{width:300pxheight:100px}*/
body{height:2150px no-repeat top center}
/*.top{width:31pxheight:126px}*/
#retop{background:url("https://www.ssffx.com/js/fh/top.png")width:31pxheight:126pxdisplay:block
position:fixedbottom:0right:20pxdisplay: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>

*{margin:0pxpadding:0px}
/*以“.”开头的css样式称之为 类样式*/
/*.top{width:300pxheight:100px}*/
body{height:2150px no-repeat top center}
/*.top{width:31pxheight:126px}*/
#retop{background:url("https://www.ssffx.com/js/fh/top.png")width:31pxheight:126pxdisplay:block
position:fixedbottom:0right:20pxdisplay:none
}
$(document).ready(function(){
$('').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 })} })})

作者:思海,如若转载,请注明出处:https://www.xddv.com/82497.html

发表评论

登录后才能评论

联系我们

在线咨询:

微信:shk1177

邮件:i@vqudao.com

工作时间:周一至周六,9:30-22:30,节假日休息

QR code