JavaScript 向下滚动时自动“返回顶部”链接

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 向下滚动时自动“返回顶部”链接相关的知识，希望对你有一定的参考价值。

// "go to top" link on window scroll
var topdistant = false;

function getScrollY() {
	var scrOfY = 0; //, scrOfX = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		scrOfY = window.pageYOffset; //scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		scrOfY = document.body.scrollTop; //scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		scrOfY = document.documentElement.scrollTop; //scrOfX = document.documentElement.scrollLeft;
	}
	return scrOfY;
}

function topDistanceCrosses(distance){
	if (getScrollY() > distance && !topdistant) {
		topdistant = true;
		$("#toplink").slideDown('slow');
		return 1 ; // going down
	}
	else if(getScrollY() < distance && topdistant ) {
		topdistant = false;
		$("#toplink").slideUp('fast');
		return 2; // going up
	}
	else {
		return 0; // nothing happens
	}
}

on HTML could be something like:
...
<body onload="topDistanceCrosses(200)" onscroll="topDistanceCrosses(200)">
...
<a href="#">
  <div id="toplink">
  Back to top �
  </div>
</a>

on CSS could be something like: 
#toplink {
	position: fixed;
	bottom: 0px;
	background-color: #f0deae;
	display: none;
	width: 100px;
	height: 20px;
	text-align: center;
	margin-left: -120px;
	float: left;
}

以上是关于JavaScript 向下滚动时自动“返回顶部”链接的主要内容，如果未能解决你的问题，请参考以下文章

滚动视图不滚动到顶部

js返回顶部（简单实用）

JS - 滚动事件(onscroll)

javascript--返回顶部效果

iPhone :- 单击按钮时自动向下滚动

JS-特效 ～ 02. 屏幕滚动事件 DTDscroll顶部悬浮导航两侧跟随广告返回顶部小火煎