首页 > 代码修改 > 网站通用“返回首页”按钮代码
2012
11-21

网站通用“返回首页”按钮代码

今天在闲逛时发现了三种返回顶部按钮,第一种是鼎鼎大名DZ所使用的返回顶部按钮的代码样式;第二种是各类博客使用jqurey方式实现的返回按钮;第三种是使用锚文本的方式进行设置也可以实现。

首先看第一种代码样式:

网站通用“返回首页”按钮代码 - 第1张  | 心岛博客

代码如下:

 <!--以下为返回顶部按钮代码-->
    <script type="text/javascript">
    var w = 230;
    var h = 59;
    var str = "";
    var obj = document.getElementById("divStayTopLeft");
    if (obj)str = obj.innerHTML;
    if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
    document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">');
    }
    else {
    document.writeln('<DIV  style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">');
    }
    document.writeln('<div style="clear:both;margin:auto;height:59px;font-size:16px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="https://www.liangxin.name/wp-content/plugins/kl_album/upload/201211/1fdc73dc710a43ba6fdcd8800e30c9f8201211212221536543.png" alt="回到顶部" style="border: 0px;" /></a></div> ');
    document.write('<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">'+str+'</div>');
    document.writeln('</DIV>');
    </script>

其次是第二种返回首页按钮,也是目前大多数博客所使用的按钮样式:

网站通用“返回首页”按钮代码 - 第2张  | 心岛博客

这个代码实现起来比第一种代码要稍微麻烦点,需要分两部分进行修改:html代码和jqurey代码,当然二者也可以写在一起,如下:

<style type="text/css">
<!--
/*返回顶部按钮样式表*/
#back-to-top{
		position:fixed;
		bottom:100px;
		right:230px;
	}
	#back-to-top a{
		text-align:center;
		text-decoration:none;
		color:#CD0000;
		display:block;
		width:80px;
		/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
		-moz-transition:color 1s; 
		-webkit-transition:color 1s;
		-o-transition:color 1s;
	}
	#back-to-top a:hover{
		color:#980101;
	}
	#back-to-top a span{
		background:#CD0000;
		border-radius:6px;
		display:block;
		height:80px;
		width:80px;
		background:#CD0026 url(images/arrow-up.png) no-repeat center center;
		margin-bottom:5px;
		-moz-transition:background 1s;
		-webkit-transition:background 1s;
		-o-transition:background 1s;
	}
	#back-to-top a:hover span{
		background:#980101 url(images/arrow-up.png) no-repeat center center;
	}
-->
</style>
<div id="back-to-top"><a href="#top"><span></span>回到顶部</a></div>

<!--以下为返回顶部按钮qurey代码-->
    <script type="text/javascript">
	$(document).ready(function(){
	//首先将#back-to-top隐藏
	$("#back-to-top").hide();
	//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
	$(function () {
		$(window).scroll(function(){
		if ($(window).scrollTop()>100){
		$("#back-to-top").fadeIn(1500);
		}
		else
		{
		$("#back-to-top").fadeOut(1500);
		}
		});
		//当点击跳转链接后,回到页面顶部位置
		$("#back-to-top").click(function(){
		$('body,html').animate({scrollTop:0},1000);
		return false;
		});
		});
		});
  </script>

第三种是锚文本方式实现“返回首页”按钮:

这个按钮是最容易实现的,不过我没有写代码,因为这个首先需要在页面头部加入一个锚如#top,然后将按钮的样式表设置一个绝对定位并给当前URL后加个#top的锚点即可实现,使用DW做此工作是最方便的了!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

网站通用“返回首页”按钮代码》有 22 条评论

留下一个回复

你的email不会被公开。