js实现回到顶部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.toTop{
				display: none;
				position: fixed;
				width: 80px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				right: 50px;
				bottom: 100px;
				border: 1px solid #000000;
			}
		</style>
	</head>
	<body>
		<p>this is p1</p>
		<p>this is p2</p>
		<p>this is p3</p>
		<p>this is p4</p>
		<p>this is p5</p>
		<p>this is p6</p>
		<p>this is p7</p>
		<p>this is p8</p>
		<p>this is p9</p>
		<p>this is p10</p>
		<p>this is p11</p>
		<p>this is p12</p>
		<p>this is p13</p>
		<p>this is p14</p>
		<p>this is p15</p>
		<p>this is p16</p>
		<p>this is p17</p>
		<p>this is p18</p>
		<p>this is p19</p>
		<p>this is p20</p>
		<p>this is p21</p>
		<p>this is p22</p>
		<p>this is p23</p>
		<p>this is p24</p>
		<p>this is p25</p>
		<p>this is p26</p>
		<p>this is p27</p>
		<p>this is p28</p>
		<p>this is p29</p>
		<p>this is p30</p>
		<p>this is p31</p>
		<p>this is p32</p>
		<p>this is p33</p>
		<p>this is p34</p>
		<p>this is p35</p>
		<p>this is p36</p>
		<p>this is p37</p>
		<p>this is p38</p>
		<p>this is p39</p>
		<p>this is p40</p>
		<p>this is p41</p>
		<p>this is p42</p>
		<p>this is p43</p>
		<p>this is p44</p>
		<p>this is p45</p>
		<p>this is p46</p>
		<p>this is p47</p>
		<p>this is p48</p>
		<p>this is p49</p>
		<p>this is p50</p>
		<p>this is p51</p>
		<p>this is p52</p>
		<p>this is p53</p>
		<p>this is p54</p>
		<p>this is p55</p>
		<p>this is p56</p>
		<p>this is p57</p>
		<p>this is p58</p>
		<p>this is p59</p>
		<p>this is p60</p>
		<p>this is p61</p>
		<p>this is p62</p>
		<p>this is p63</p>
		<p>this is p64</p>
		<p>this is p65</p>
		<p>this is p66</p>
		<p>this is p67</p>
		<p>this is p68</p>
		<p>this is p69</p>
		<p>this is p70</p>
		<p>this is p71</p>
		<p>this is p72</p>
		<p>this is p73</p>
		<p>this is p74</p>
		<p>this is p75</p>
		<p>this is p76</p>
		<p>this is p77</p>
		<p>this is p78</p>
		<p>this is p79</p>
		<p>this is p80</p>
		<p>this is p81</p>
		<p>this is p82</p>
		<p>this is p83</p>
		<p>this is p84</p>
		<p>this is p85</p>
		<p>this is p86</p>
		<p>this is p87</p>
		<p>this is p88</p>
		<p>this is p89</p>
		<p>this is p90</p>
		<p>this is p91</p>
		<p>this is p92</p>
		<p>this is p93</p>
		<p>this is p94</p>
		<p>this is p95</p>
		<p>this is p96</p>
		<p>this is p97</p>
		<p>this is p98</p>
		<p>this is p99</p>
		<p>this is p100</p>
		<p>this is p101</p>
		<p>this is p102</p>
		<p>this is p103</p>
		<p>this is p104</p>
		<p>this is p105</p>
		<p>this is p106</p>
		<p>this is p107</p>
		<p>this is p108</p>
		<p>this is p109</p>
		<p>this is p110</p>
		<p>this is p111</p>
		<p>this is p112</p>
		<p>this is p113</p>
		<p>this is p114</p>
		<p>this is p115</p>
		<p>this is p116</p>
		<p>this is p117</p>
		<p>this is p118</p>
		<p>this is p119</p>
		<p>this is p120</p>
		<p>this is p121</p>
		<p>this is p122</p>
		<p>this is p123</p>
		<p>this is p124</p>
		<p>this is p125</p>
		<p>this is p126</p>
		<p>this is p127</p>
		<p>this is p128</p>
		<p>this is p129</p>
		<p>this is p130</p>
		<p>this is p131</p>
		<p>this is p132</p>
		<p>this is p133</p>
		<p>this is p134</p>
		<p>this is p135</p>
		<p>this is p136</p>
		<p>this is p137</p>
		<p>this is p138</p>
		<p>this is p139</p>
		<p>this is p140</p>
		<p>this is p141</p>
		<p>this is p142</p>
		<p>this is p143</p>
		<p>this is p144</p>
		<p>this is p145</p>
		<p>this is p146</p>
		<p>this is p147</p>
		<p>this is p148</p>
		<p>this is p149</p>
		<p>this is p150</p>
		<p>this is p151</p>
		<p>this is p152</p>
		<p>this is p153</p>
		<p>this is p154</p>
		<p>this is p155</p>
		<p>this is p156</p>
		<p>this is p157</p>
		<p>this is p158</p>
		<p>this is p159</p>
		<p>this is p160</p>
		<p>this is p161</p>
		<p>this is p162</p>
		<p>this is p163</p>
		<p>this is p164</p>
		<p>this is p165</p>
		<p>this is p166</p>
		<p>this is p167</p>
		<p>this is p168</p>
		<p>this is p169</p>
		<p>this is p170</p>
		<p>this is p171</p>
		<p>this is p172</p>
		<p>this is p173</p>
		<p>this is p174</p>
		<p>this is p175</p>
		<p>this is p176</p>
		<p>this is p177</p>
		<p>this is p178</p>
		<p>this is p179</p>
		<p>this is p180</p>
		<p>this is p181</p>
		<p>this is p182</p>
		<p>this is p183</p>
		<p>this is p184</p>
		<p>this is p185</p>
		<p>this is p186</p>
		<p>this is p187</p>
		<p>this is p188</p>
		<p>this is p189</p>
		<p>this is p190</p>
		<p>this is p191</p>
		<p>this is p192</p>
		<p>this is p193</p>
		<p>this is p194</p>
		<p>this is p195</p>
		<p>this is p196</p>
		<p>this is p197</p>
		<p>this is p198</p>
		<p>this is p199</p>
		<p>this is p200</p>
		<div class="toTop">toTop</div>
	</body>
	<script type="text/javascript">
		
		var toTop = document.getElementsByClassName("toTop")[0];
		var interId = null;
		
		toTop.onclick = function (){
			interId = setInterval(function (){
				var oldTop = document.body.scrollTop;
				if (oldTop <= 0) {
					clearInterval(interId);
				}else{
					document.body.scrollTop = parseInt(oldTop) - 100;
				}
			},20)
		}
		
		
		window.onscroll = function (){
			var bh = parseInt(window.innerHeight);
			var oldTop = document.body.scrollTop;
			if (oldTop > bh) {
				toTop.style.display = "block";
			} else{
				toTop.style.display = "none";
			}
		}
		
	</script>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值