原创 

html 原生js 返回到顶部源代码Demo

分类:前端,js    610人阅读    IT小君  2021-12-04 21:45

html(关键是id,样式请自己定义):

<div
	  class="ivu-back-top ivu-back-top-show" id="gotop"
	  style="bottom: 50px; right: 30px;display:none"
	>
	  <div class="ivu-back-top-inner">
		<i class="ivu-icon ivu-icon-ios-arrow-up"></i>
	  </div>
	</div>
</div>

js:

<script>
 var oA = null
    window.onload = function() {
        oA = document.getElementById('gotop');
 
        oA.onclick = function() {
            toScroll("top")
        }
		 setInterval(function() {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
			if(scrolltop>20){
				oA.style.display='block'
			}else{
				oA.style.display='none'
			}
        }, 30)
    }
	
    function toScroll(target) {
        clearInterval(this.timer)
        var scrollHeight = document.body.offsetHeight - document.documentElement.clientHeight;
        this.timer = setInterval(function() {
            var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
            switch (target) {
                case 'top':
                    window.scrollBy(0, -100);
                    if (Math.ceil(scrolltop) <= 0) {
                        clearInterval(this.timer)
						oA.style.display='none'
                    };
                    break;
                case 'bottom':
                    window.scrollBy(0, 100);
                    if (Math.ceil(scrolltop) >= scrollHeight) {
                        clearInterval(this.timer)
                    };
                    break;
            }
        }, 30)
    }
 </script>


点击广告,支持我们为你提供更好的服务

html5 svg夜空中星星流星动画场景特效

html5图标下拉搜索框自动匹配代码

HTML5 Canvas竖直流动线条背景动画特效

jQuery右端悬浮带返回顶部特效

canvas炫酷鼠标移动文字粒子特效

中小型创意设计服务公司网站模板

小众时尚单品在线电子商务网站模板

html5 canvas进度条圆环图表统计动画特效

js+css3抽奖转盘旋转点餐代码

css鼠标跟随文字模糊特效

现代时尚家具公司网站模板

网页设计开发公司网站模板

响应式时尚单品在线商城网站模板

html5 canvas彩色碎片组合球形旋转动画特效

HTML5数字产品服务公司网站模板

HTML5现代家居装潢公司网站模板

响应式太阳能能源公司网站模板

有机水果蔬菜HTML5网站模板

css+js实现的颜色渐变数字时钟动画特效

响应式咖啡饮品宣传网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务