Question

尝试创建向下滚动按钮，当滚动按钮处于单击向下位置时，或者在触摸位置的平板电脑上以可设置的速度向下滚动。在页面底部，向下滚动按钮应成为滚动到顶部按钮。不是懒惰，我已经搜索了这个，但我可以找到各种滚动方法但不是这个。谁能请帮忙。一些代码开始（我希望）。 JSFIDDLE HERE

["http://display.companyX.com/rest/banner?l_id=A000-0000-0000000-000000-111111-0-0-0&k=A77K_fakfhaskfhkjshfkjo=kafkjafk",
 "http://display.companyX.com/rest/banner?l_id=A000-0000-0000000-000000-111111-0-0-0&k=A77K_fakfhaskfhkjshfkjo=kafkjafk",
 "http://display.companyX.com/rest/banner?l_id=A000-0000-0000000-000000-111111-0-0-0&k=A77K_fakfhaskfhkjshfkjo=kafkjafk",
 "http://display.companyX.com/rest/banner?l_id=A000-0000-0000000-000000-111111-0-0-0&k=A77K_fakfhaskfhkjshfkjo=kafkjafk",
 "http://display.companyX.com/rest/banner?l_id=A000-0000-0000000-000000-111111-0-0-0&k=A77K_fakfhaskfhkjshfkjo=kafkjafk"
 ]

#scrollButtonDown{
	position:fixed;
	width:80px;
	height:80px;
	border-radius:40px;
	bottom:0;
	background-color: rgba(0, 0, 0, 0.7);
	color:#ffffff;
	text-align:center;
	}
	
	
	#scrollButtonTop{
	position:fixed;
	width:80px;
	height:80px;
	border-radius:40px;
	bottom:0;
	background-color: rgba(0, 0, 0, 0.7);
	color:#ffffff;
	text-align:center;
	}

Answer 1

使用事件处理程序来更改＆＃34;滚动＆＃34;的状态。变量。并运行setInterval来监视该变量是否成立。您可以通过更改间隔时间或每个间隔移动页面的数量来更改速度

var scrolling = false;
var atBottom = false;

window.onload = function(){
  var eButton = document.getElementById("scrollButtonTop");
  eButton.addEventListener("mousedown", bDown);
  eButton.addEventListener("mouseup", bUp);
  eButton.addEventListener("mouseout", bUp);
  eButton.addEventListener("touchstart", bDown);
  eButton.addEventListener("touchend", bUp);
}
window.onscroll = function(){
  var eButton = document.getElementById("scrollButtonTop");
  var scrollPos = window.pageYOffset ||
                  document.documentElement.scrollTop || 
                  document.body.scrollTop || 
                  0;
  if(scrollPos + window.innerHeight > document.body.clientHeight - 10){
    atBottom = true;
    eButton.innerHTML = "GO&thinsp;TO<br>TOP";
    eButton.className = "glyphicon glyphicon-chevron-up";
  } else {
    atBottom = false;
    eButton.innerHTML = "SCROLL<br>DOWN";
    eButton.className = "glyphicon glyphicon-chevron-down";
  }
}
function bDown(){
  if(atBottom) window.scrollTo(0,0);
  else scrolling = true;
}
function bUp(){
  scrolling = false;
}

setInterval(function(){
  if(scrolling) window.scrollBy(0,1);
},50);

JSfiddle Here

滚动按钮逐渐向下滚动

1 个答案: