JS实现显示隐藏滑到顶部

直接上代码

html部分

// HTML
 <span id="backUp">返回顶部</span>

有些人用的时候或许会使用a标签
个人建议不要使用a标签,可以换个别的标签。因为a标签会刷新页面。

js部分

// An highlighted block
<script>
	//点击按钮返回顶部
	$('#backUp').click(
	      function () {
	        $('html,body').animate({
	          scrollTop: '0px'
	        },200);//200毫秒返回到顶部
	        return false;
	      });
	      //按钮的显示隐藏
	    window.onscroll = function () {
	      if (document.documentElement.scrollTop + document.body.scrollTop > 100) {
	        document.getElementById("backUp").style.display = "block";//backUp是取得id
	      }
	      else {
	        document.getElementById("backUp").style.display = "none";
	      }
	    }
</script>

你可能感兴趣的:(原生JS)