Question

html css JS 怎么设计点击回顶部效果？

设计一种如图的圆形点击按钮，始终保持在页面右下角，点击可回到页眉效果，求大神示例代码或者JS。

Answer 1

点击回顶部，或是回某个位置，主要是设置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>

Answer 2

返回顶部效果思路：(无需js，直接使用html)

1、在源代码里顶部代码中添加一个<a name="#top"></a>标签锚点；

2、添加一个<a href='#top'>返回顶部</a>；

html代码：

<a name="#top"></a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a href="#top"/>返回顶部</a>

Answer 3

js代码：

function pageScroll()
 {     
  //把内容滚动指定的像素数（第一个参数是向右滚动的像素数，第二个参数是向下滚动的像素数）    
  window.scrollBy(0,-100);    
  //延时递归调用，模拟滚动向上效果    
  scrolldelay = setTimeout('pageScroll()',100);    
  //获取scrollTop值，声明了DTD的标准网页取document.documentElement.scrollTop，否则取document.body.scrollTop；因为二者只有一个会生效，另一个就恒为0，所以取和值可以得到网页的真正的scrollTop值    
  var sTop=document.documentElement.scrollTop+document.body.scrollTop;    
  //判断当页面到达顶部，取消延时代码（否则页面滚动到顶部会无法再向下正常浏览页面）    
  if(sTop==0) clearTimeout(scrolldelay);
 }

html代码：

 <a onclick="pageScroll()" class="return-top"></a>

追问

js功能看懂了，那请问怎么设计一个圆形的点击按钮并且始终保持在页面右下角那? 链接的class="return-top" 这个样式怎么写？

追答

position:fixed;始终在固定位置显示，还有就是用js控制，滚动条滚动到固定位置才出现的..

Answer 4

可以通过锚点来实现 设计锚点的页面转向为页首标签就可以

Answer 5

很简单的方式<a href='#">toTop</>