javascript--返回顶部效果

window.onload = function(){var obtn = document.getElementById('btn');//客户端页面可视区高度var clientHeight = document.documentElement.clientHeight;var timer = null;var isStop = true;//判断在浏览器触发回到顶部时，用户是否滚动滚轮window.onscroll = function(){var osTop = document.documentElement.scrollTop || document.body.scrollTop;if(osTop >= clientHeight){obtn.style.display = 'block';}else{obtn.style.display = 'none';}if(!isStop){clearInterval(timer);}isStop = false;}obtn.onclick = function(){        //定时器timer = setInterval(function(){var osTop = document.documentElement.scrollTop || document.body.scrollTop;var ispeed = Math.floor(-osTop / 6);isStop = true;document.documentElement.scrooTop = document.body.scrollTop = osTop + ispeed;if(osTop == 0){clearInterval(timer);}},30);}
}

//知识点1.获取元素，添加事件2.根据可视区域高度，判断元素显隐3.获取滚动条高度，设置定时器，通过一个表达式设置可变的滚动速度，模拟先快后慢的效果4.清除定时器的时机，1.滚动条高度为0；2.判断用户是否触发了滚动事件。

转载于:https://www.cnblogs.com/xwnlh/p/7400868.html

javascript--返回顶部效果相关推荐

原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
一.实现效果二.实现功能搜索框滑动固定,伸缩动画菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
layui页面返回顶部效果
 <link rel="stylesheet" type="text/css" href="'css/l ...
Javascript返回顶部和砸金蛋，跑马灯等游戏代码实现
1. 我们经常写页面的时候会遇到页面很长需要做返回顶部的操作: $("id /class").animate({scrollTop:$('.class').offset().top ...
用Javascript实现回到顶部效果
用Javascript实现回到顶部效果经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
隐藏html5回到顶部,用jQuery实现的智能隐藏、滑动效果的返回顶部代码
在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 回到顶部 JS代码: $(document).ready(function() { //首先将#back-to-top隐藏 $ ...
网页中返回顶部代码(多种方法)另附注释说明
下面就说下简单的返回顶部效果的代码实现,附注释说明,最简单的静态返回顶部,点击直接跳转页面顶部及用js模拟滚动效果上滑至顶部下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返 ...
页面返回顶部（方法比较）
下面就说下简单的返回顶部效果的代码实现,附注释说明. 1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能方法一:用命名锚点击返回到顶部预设的id为top的元素 h ...
仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...

javascript--返回顶部效果

javascript--返回顶部效果相关推荐

最新文章

热门文章