返回顶部样式css,返回顶部代码css3

css3中怎么做返回顶部

重点是go-top的CSS定义：

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、成都网站设计、德惠网络推广、小程序制作、德惠网络营销、德惠企业策划、德惠品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供德惠建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

div.go-top { display: none;

opacity: 0.6;

z-index: 999999;

position: fixed;

bottom: 113px;

left: 90%;

margin-left: 40px;

border: 1px solid #a38a54;

width: 38px;

height: 38px;

background-color: #eddec2;

border-radius: 3px;

cursor: pointer;}div.go-top:hover { opacity: 1;

filter: alpha(opacity=100);}div.go-top div.arrow { position: absolute;

left: 10px;

top: -1px;

width: 0;

height: 0;

border: 9px solid transparent;

border-bottom-color: #cc3333;}div.go-top div.stick { position: absolute;

left: 15px;

top: 15px;

width: 8px;

height: 14px;

display: block;

background-color: #cc3333;

-webkit-border-radius: 1px;

-moz-border-radius: 1px;

border-radius: 1px;}

使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。

按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现

$(function() { $(window).scroll(function() { if ($(window).scrollTop() 1000) $('div.go-top').show(); else

$('div.go-top').hide();

}); $('div.go-top').click(function() { $('html, body').animate({scrollTop: 0}, 1000);

});

});

当按下按钮时，有动画效果返回顶部

如何为网页添加返回顶部按钮

1、纯js,无动画版本

[html] view plain copy

window.scrollTo(x-coord, y-coord);

[html] view plain copy

如：window.scrollTo(0,0);

2、纯js，带动画版本

生硬版：

[html] view plain copy

var scrollToTop = window.setInterval(function() {

var pos = window.pageYOffset;

if ( pos 0 ) {

window.scrollTo( 0, pos - 20 ); // how far to scroll on each step

} else {

window.clearInterval( scrollToTop );

}

}, 16); // how fast to scroll (this equals roughly 60 fps)

流畅版：

[html] view plain copy

(function smoothscroll(){

var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

if (currentScroll 0) {

window.requestAnimationFrame(smoothscroll);

window.scrollTo (0,currentScroll - (currentScroll/5));

}

})();

3、jQuery,带动画版本

首先需要在顶部添加如下html元素：

[html] view plain copy

span style="font-size:14px"p id="back-to-top"a href="#top"span/span返回顶部/a/p

/span

其中a标签指向锚点top，可以在顶部防止一个a name="top"/a的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

[css] view plain copy

span style="font-size:14px"/*returnTop*/

p#back-to-top{

position:fixed;

display:none;

bottom:100px;

right:80px;

}

p#back-to-top a{

text-align:center;

text-decoration:none;

color:#d1d1d1;

display:block;

width:64px;

/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

-moz-transition:color 1s;

-webkit-transition:color 1s;

-o-transition:color 1s;

}

p#back-to-top a:hover{

color:#979797;

}

p#back-to-top a span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;

border-radius:6px;

display:block;

height:64px;

width:56px;

margin-bottom:5px;

/*使用CSS3中的transition属性给span标签背景颜色添加渐变效果*/

-moz-transition:background 1s;

-webkit-transition:background 1s;

-o-transition:background 1s;

}

#back-to-top a:hover span{

background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px;

}

/span

上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：

有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。

[html] view plain copy

script src=""/script

script

$(function(){

//当滚动条的位置处于距顶部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);

if ($('html').scrollTop()) {

$('html').animate({ scrollTop: 0 }, 1000);

return false;

}

$('body').animate({ scrollTop: 0 }, 1000);

return false;

});

});

});

/script

html css 返回顶部按钮位置怎么固定？

可以使用相当于浏览器定位。css样式中写入：

{position: fixed;

right: 20px;

bottom: 100px; }相当于浏览器右边20px，浏览器底部100px的距离的定位。

fixed总是以body为定位时的对象，总是根据浏览器的窗口来进行元素的定位，通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。