返回顶部php代码,本博客返回顶部效果实现源码分享

应网友要求，在这里共享下本博客返回顶部效果实现源码！

实现思路：

主要使用css3新属性：transition & transform 及定位属性position来实现按钮的滚动展示效果！3个属性具体用法有兴趣的童鞋可以云了解学习下。当然了ctrl+c & ctrl+v 源码也是完全可以的，效果一样 ，呵呵！

(为简化效果的实现，jquery中兼容ie6的写法已被略去，在意ie6的可直接参考下本站这部分的写法)

源码如下：

//返回顶部

function topControl(obj){

var _this=$(obj);

$(window).scroll(function(){

if($(this).scrollTop()!=0){

_this.addClass("showThis");

}else{

_this.removeClass("showThis");

}

})

}

//初始化实例

$(function(){

topControl('.toTop');

})

body{height:2000px}/*只为演示页面出现滚动条*/

.toTop {

width: 50px;

height: 50px;

position: fixed;

bottom: 2px;

right: -60px;

outline: 0;

transition: all 1s ease;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-ms-transition: all 1s ease;

_position: absolute;

}

.toTop.showThis {

right: 8px;

transform: rotate(-360deg);

-webkit-transform: rotate(-360deg);

-moz-transform: rotate(-360deg);

-ms-transform: rotate(-360deg);

}

.toTop b {

width: 100%;

height: 100%;

display: block;

text-indent: -9999em;

background: url(https://www.phpvar.com/wp-content/themes/forigi1.1/images/icon_top.png) no-repeat;

}

回顶部

提示：你可以先修改部分代码再运行。

运行上面的代码，默认是不显示“返回顶部”的按钮，拉动下滚动条，“返回顶部”的按钮效果就出来！

Begin Enjoying It...