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

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 JS 怎么设计点击回顶部效果？

点击回顶部，或是回某个位置，主要是设置scrollTop。

下面是一个简单回顶的例子：

下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。

style    

body{height:5000px;}    

input {position:fixed; bottom:0px; right:0px;}    

/style    

script    

window.onload=function(){    

var oBtn = document.getElementById('btn');    

var timer = null;    

var bFlag = false;    

oBtn.onclick=function(){    

moveScroll(0,3000);

};    

window.onscroll=function(){    

if(bFlag)    

{    

clearInterval(timer);    

}

bFlag=true;    

};    

function moveScroll(target,time)    

{    

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

var dis = target - start;    

var count = Math.floor(time/30);    

var n=0;    

clearInterval(timer);    

timer = setInterval(function(){    

n++;    

bFlag=false;    

document.documentElement.scrollTop = start + dis*n/count;    

document.body.scrollTop = start+dis*n/count;    

if(n==count)    

{    

clearInterval(timer);    

}

},30);    

}    

};    

/script

用纯CSS制作返回顶部的滑动效果

要有那个滑上去过度，不用JS你别想了，不用JS只能一点链接一下就跳到页头去。

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

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

{position: fixed;

right: 20px;

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

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

css 当鼠标点击插入的图片时网页回到头部

js吧

网页编程中时常会用到返回网页顶部代码，返回顶部方法只有两种：一种是直接跳转到顶部，二是采用JS添加滚动效果，关于代码方面，天缘一贯的理念，少写点废话，尽量在代码量和体验方面寻求平衡，与其花大力气写个二三十行代码去返回顶部，不如把精力放在改善网站内容方面。

一、使用锚标记

此方法最简单，只需在body下放个隐藏的锚点标记，内容如下：

代码如下

复制代码

a name="top" id="top"/a

然后，在网页底部放一个访问链接即可：

代码如下

复制代码

a href="#top" target="_self"返回顶部/a

此方法效果是一次直接跳到顶部，而且URL地址栏会显示个#top，追求完美的可使用下面方法。

二、使用JS scrollTo函数

javascript scroll函数（scrollBy scrollTo）是用来滚动页面到指定位置，格式定义如下：

■scrollBy(xnum,ynum)

■scrollTo(xpos,ypos)

其中：

■xnum，ynum分别指水平、垂直滚动多少像素，正值表示向右或向下滚动，负值表示向左或向上滚动

■xpos，ypos分别指水平和垂直坐标

使用示例：

代码如下

复制代码

a href="javascript:scrollTo(0,0);"返回顶部/a

三、scrollBy慢速滚动返回顶部

本方式使用上面提到的scrollBy函数，每次只滚动定量像素，整体看起来有点滚动效果，代码如下：

代码如下

复制代码

var sdelay=0;

function returnTop() {

window.scrollBy(0,-100);//Only for y vertical-axis

if(document.body.scrollTop0) {

sdelay= setTimeout('returnTop()',50);

}

}

scrollBy函数第二个参数我设了-100，越大（比如-10）滚动越慢，越小滚动越快，启动滚动只需在页面底部加个链接：

代码如下

复制代码

a href="javascript:returnTop();"返回顶部/a

JQuery实现返回顶部功能

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

p id="back-to-top"a href="#top"span/span返回顶部/a/p

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

css3中怎么做返回顶部

重点是go-top的CSS定义：

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);

});

});

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

新闻名称：返回顶部样式css,h5返回顶部
网站路径：http://lswzjz.com/article/phijie.html