点击缓慢滑动返回顶部

返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。

  //核心js代码var top=document.getElementById("backTop");var bottom=document.getElementById("backTop");top.function(){//alert(11);timer=setInterval(function(){var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;var ispeed=Math.floor(-scrollTop/6);console.log(ispeed)if(scrollTop==0){clearInterval(timer);}document.documentElement.scrollTop=document.body.scrollTop=scrollTop+ispeed;},30)};

使用添加id=“backTop” 。

使用Javascript Scroll函数缓慢返回顶部

function backTop() {window.scrollBy(0,-100);scrolldelay=setTimeout('backTop()',100);if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay);}

使用时“backTopl();”。

使用onload加上scroll功能实现缓慢返回顶部

BackTop=function(btnId){var btn=document.getElementById(btnId);var page=document.documentElement;window.set;btn.function(){btn.style.display="none";window.null;this.timer=setInterval(function(){page.scrollTop-=Math.ceil(page.scrollTop*0.1);if(page.scrollTop==0)clearInterval(btn.timer,window.set);},10);};function set(){btn.style.display=page.scrollTop?'block':"none"}};BackTop('backTop');

使用时添加id=“backTop” 。

使用jquery插件实现缓慢返回顶部
下载链接（内含说明）
http://www.jq22.com/jquery-info325
js部分：

$(function(){   $(window).scroll(function() {      if($(window).scrollTop() >= 100){$('.actGotop').fadeIn(300); }else{    $('.actGotop').fadeOut(300);    }  });$('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script><script type="text/javascript">$("a").click(function(){$('html,body').animate({'scrollTop':'0'},500,)})</script>

点击缓慢滑动返回顶部相关推荐

通过组件实现小程序底部Top按钮滑动到底部显示，其他情况则隐藏，点击按钮之后返回顶部的效果
前言提示:此篇是基于QQ小程序,但微信小程序的实现原理也基本都差不多. 所涉及到的知识点,先罗列一下: 1.监听页面滚动以及触发回顶部:onPageScroll 2.获取页面高度:createSel ...
原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
一.实现效果二.实现功能搜索框滑动固定,伸缩动画菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
vue3点击返回顶部
// 点击返回顶部 ``` // 1. 要在heml 写一个返回的按钮或者图标,然后定位到页面上// 2. 在定义一个状态, 稍后用于判断是否让这个图标返回上面// 3. 在滚动盒子上添加一个事件 ...
Android 模拟点击、滑动、返回
懒惰使人进步.一点都没错,我就是那个懒惰的人. 文章目录项目实现功能使用方法功能演示技术分析项目实现功能可以模拟用户操作点击滑动返回功能. 使用方法安装apk,首次安装后引导至开 ...
点击按钮，丝滑的返回顶部
前言在开发过程中,一定会遇到需要返回顶部的操作,很多人都会直接返回顶部,就像跳转一样,降低了很大的体验,以下代码则是可以让你的返回顶部变得丝滑起来. 实现不论是原生,还是vue.react,此方法 ...

点击缓慢滑动返回顶部

点击缓慢滑动返回顶部

点击缓慢滑动返回顶部相关推荐

最新文章

热门文章