全代码打造简洁美观回到顶部按钮
莫笑推荐一个比较实用的 jQuery 技巧，为网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。
这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。
点击之后就会跳转到顶部，然后这个按钮平滑消失。因为是纯代码，加载速度更快，效果色彩控制好；代码精简，只有数条而已，拒绝了大坨大坨的代码单元。
HTML 结构
他使用了 a 标签作为这个结构，可能不太标准，但是比较方便。在 a 标签中，内置了一个 span 标签，用来显示三角号。具体代码如下：
<a id="gotop" href="#"> <span>▲</span> </a>
直接在 a 标签中，填写一个三角号。剩下的就是使用 CSS 进行样式控制。
CSS 代码
#gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; }
上面这段代码，定义了 a 标签的外观样式，定义 display 为 block，这样才能指定它的 width 和 height。定义 position 为fixed，让它固定在右下角。同时为它指定圆角，就是使用 border-radius 属性，定于半径为10px的圆角。
#gotop span{ display:block; width:60px; color:#dddddd; }
#gotop span:hover{ color:#cccccc; }
#gotop span{ font-size:40px; text-align:center; margin-top:4px; }
这一段就是定义了 span 标签里面的三角号，至于如何打出这个“三角号”，使用搜狗输入法，按下“Ctrl + Shift + z”，就会弹出搜狗的特殊字符，就可以找到了。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的 margin-top：4px，则是用来准确定位三角号，让它居中显示。
jQuery 代码
具体的 jQuery 代码如下，解析已经写在注释里面了：
$(function(){ $(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
if( scrollt >200 ){ //判断滚动后高度超过200px,就显示
$("#gotop").fadeIn(400); //淡出
}else{
$("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
} });
$("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({scrollTop:"0px"},200);
});
});
简单几句代码而已，就可以出现这个功能，而且可以方便的修改颜色、形状、大小等。当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。所以代码还是优先的。
原文链接：http://xdy.me/58
这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。
点击之后就会跳转到顶部，然后这个按钮平滑消失。因为是纯代码，加载速度更快，效果色彩控制好；代码精简，只有数条而已，拒绝了大坨大坨的代码单元。
HTML 结构
他使用了 a 标签作为这个结构，可能不太标准，但是比较方便。在 a 标签中，内置了一个 span 标签，用来显示三角号。具体代码如下：
<a id="gotop" href="#"> <span>▲</span> </a>
直接在 a 标签中，填写一个三角号。剩下的就是使用 CSS 进行样式控制。
CSS 代码
#gotop{ display:block; width:60px; height:60px; position:fixed; bottom:50px; right:40px; border-radius:10px 10px 10px 10px; text-decoration:none; display:none; background-color:#999999; }
上面这段代码，定义了 a 标签的外观样式，定义 display 为 block，这样才能指定它的 width 和 height。定义 position 为fixed，让它固定在右下角。同时为它指定圆角，就是使用 border-radius 属性，定于半径为10px的圆角。
#gotop span{ display:block; width:60px; color:#dddddd; }
#gotop span:hover{ color:#cccccc; }
#gotop span{ font-size:40px; text-align:center; margin-top:4px; }
这一段就是定义了 span 标签里面的三角号，至于如何打出这个“三角号”，使用搜狗输入法，按下“Ctrl + Shift + z”，就会弹出搜狗的特殊字符，就可以找到了。这几句代码意思很简单，就是定义了三角号的外观样式，同时制定了颜色变化，这是为了用户体验。最下面的 margin-top：4px，则是用来准确定位三角号，让它居中显示。
jQuery 代码
具体的 jQuery 代码如下，解析已经写在注释里面了：
$(function(){ $(window).scroll(function(){ //只要窗口滚动,就触发下面代码
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
if( scrollt >200 ){ //判断滚动后高度超过200px,就显示
$("#gotop").fadeIn(400); //淡出
}else{
$("#gotop").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动
} });
$("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
$("html,body").animate({scrollTop:"0px"},200);
});
});
简单几句代码而已，就可以出现这个功能，而且可以方便的修改颜色、形状、大小等。当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。所以代码还是优先的。
原文链接：http://xdy.me/58
