请问var osTop = document.documentElement.scrollTop为什么不能做全局变量

把获取scrollTop数值的变量放到onscroll和onclick外面就不行　必须放到onscroll里面才可以

为什么？

我本来想把 var osTop = document.documentElement.scrollTop || document.body.scrollTop;写道外面　就是和timer=null　getelementbyid这些写在一块　在onscroll里面使用osTop变量就不能成功达到效果　必须写在onscroll里面才可以　为何？

学思

2016-09-19

源自：回到顶部效果 4-2

关注问题我要回答

823

操作

收起

2 回答

ThinkSummer
2016-09-20

1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存，另外会造成变量名污染；

2、var osTop = document.documentElement.scrollTop。如果写在外面，osTop只是在JS文件载入时获取滚动条距离顶部的高度，但有的时候，如页面在滚动的时候osTop的值是在不断变化的，所以我们要在绑定scroll事件中不断的去获取osTop的值；

3、本人对JS也不是太熟悉，回答的也不一定正确。上面是我用jQuery写的咱们慕课网右侧返回顶部的代码。

0 回复有任何疑惑可以回复我~

收起回答

ThinkSummer
2016-09-20

window.onload = function () {

	// 获取滚动条距离顶部的高度  '||document.body.scrollTop'在标准w3c下，document.body.scrollTop恒为0
	// var disTop  = document.documentElement.scrollTop;
	
	// 根据页面高度控制返回顶部按钮的显示
	$(window).on('scroll', function(){
		var viewAreaHeight = $(window).height();
		var disTop = $('body').scrollTop();
		if ( disTop < viewAreaHeight ) {
			$('#backTop').css({"display" : "none"});
			$('#js-elevator-weixin').addClass('no-goto');
		} else {
			$('#backTop').css({"display" : "block"});
			$('#js-elevator-weixin').removeClass('no-goto');
		};
	});
	
	// **第一种解决方案 根据慕课网教程改写http://www.imooc.com/video/889
	$('#backTop').on('click', function(e){
		e.stopPropagation();
		var timer   = null;
		var isBreak = false;
		// 设置定时器
		timer = setInterval(function(){
			var disTop = $('body').scrollTop();
			var iSpeed = Math.floor( -disTop/8 );
			$('html, body').scrollTop(disTop + iSpeed);	

			// 点击终止
			$(window).on('click', function(){
				isBreak = true;
			});
			if (disTop == 0 || isBreak) {
				clearInterval(timer);
			};
			// 恢复初始状态 为下一次gotoTop做准备
			isBreak = false;
		}, 30);
	});


	// **第二种简单的方案 
	var speed = 800;
	// 回到顶部
	$('#toTop_simple').on('click', function(){
		$('html, body').animate({
	    	scrollTop: '0px'
		}, speed);
	});
};