JS === 实现回到顶部

JS === 实现点击回到顶部

样式:

body{height:10000px} // 产生滚动条

.go-2-top{width:50px; height:50px;background:red;cursor:pointer;position:fixed;right:20px;bottom:20px;display:none } // 模拟点击div的时候回到顶部 最初隐藏,滚动一定距离显示

结构:

<body>

<div class = "go-2-top" id = "back-top"></div>

</body>

JS:

<script>

  var backTop = document.getElementById("back-top") //获取到div 对象

 

  // onscroll 事件

  window.onscroll = function (){

    var scrollTop = document.documentElement.scrollTop ?     // 三目运算 = 兼容问题

           document.documentElement.scrollTop :

           document.body.scrollTop;

    if(scrollTop > 800){                              //当滚动条滚动的距离大于 800 的时候,才会显示 回到顶部的div

      backTop.style.display = "block"

    }else{

      backTop.style.display = "block"

    }

  }

  // 为 div 添加点击事件

  var id;  // ===== 要注意 id声明的位置

  backTop.onclick = function (){

    id = SetInterval(function (){          // 使用间隔函数的理由===》当点击回到顶部的时候,不是一下子滚动距离就变成0 ,而是形成一个过渡的过程,每隔16毫秒,current-100

    var current = document.documentElement.scrollTop ?    // 取得当前滚动的距离

          document.documentElement.scrollTop :

          document.body.scrollTop;

    if(current === 0){

      clearInterval(id);    // 当滚动距离为0 的时候,要清除这个间隔函数

    }

    document.documentElement.scrollTop = current - 100    // 形成一个慢慢过渡到0 的过程

    document.body.scrollTop = current - 100   // 写两个是为了兼容

    } , 16)

 }

  // 在回到顶部的过程时候,鼠标滚轮动的时候,滚动会暂停

  // 添加一个鼠标滚轮事件

  window.onmousewheel = function (){

  clearInterval(id);  // ======= 这个时候会涉及到上面标注的要注意id的位置,最开始的时候 把他写在了函数体里面,到这里的时候就获取不到了。

  }

学习要点总结 :

1. 事件:

onscroll 滚动事件

onmousewheel 鼠标滚轮事件

2. 间隔函数

setInterval() == 两个参数,一是执行的函数 二是间隔的时间

清除间隔函数

clearInterval(标识符)

3.scrollTop 兼容问题

document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

4.作用域

原文地址:https://www.cnblogs.com/rabbit-lin0903/p/11141269.html

时间: 2024-10-16 01:24:21

JS === 实现回到顶部的相关文章

js——页面回到顶部

很久都没有去慕课网学习学习了,刚恰好就看见了一个用的比较多的小例子——页面回到顶部,记得之前自己也是在初学web时,被这个坑了一回,因此今天特地拿来分享分享…… <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面回到顶部</title> <link rel="stylesheet&quo

JS原生回到顶部效果

// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBtnTop.onclick = function () { moveScroll(0, 500); return false; }; function moveScroll( iTarget, time ) { // 起点 var start = document.documentElement.sc

原生js实现回到顶部

window.onload = function() { document.body.style.height='5000px'; window.scrollTo(0,500); // var timer = setInterval(function() { // var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; // window.scrollBy(0, -100) // if (scr

浮动【电梯】或【回到顶部】小插件:iElevator.js

iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null, btns: null, backtop: null, selected: '', sticky: -1, visible: { isHide: 'no', numShow: 0 }, speed: 400, show: function(me) { me.element.show(); }, h

原生js实现使滚动条缓慢回到顶部的效果

html 部分 (因为a标签有链接功能,此时最好不要用a包裹 否则影响实现效果) <li id="btn-top">回到顶部</li> js部分 var top=document.getElementById("btn-top"); var bottom=document.getElementById("btn-top"); top.onclick=function(){ //alert(11); timer=setInt

js回到顶部

图片 回到顶部1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ height: 4000px; } #btn{ width

超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码

//以下代码放到一个adapt.js文件当中 (function (doc, win) {   var docEl = doc.documentElement,     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',     recalc = function () {       var clientWidth = docEl.clientWidth;       if (!clientWi

JS 回到顶部

最近在慕课网看了一个案例教程——回到顶部效果(原生js实现) <a href="javascript:;" id="btn" title="回到顶部"></a> 这个a标签就是用来实现回到顶部的链接,其中 href=”javascript:;”是用来阻止a标签的默认行为,因为我们是要触发点击事件让滚动条回到顶部,而不是跳转页面.当然,如果你将其设置为 href=””,也会默认跳转到页面顶部,但是用户体验就比较差,我们主要还

JS 回到顶部插件

=====================js============== ;(function($){    $.extend({        myScrollUp:function(options){                            var defaults={                    scrollName:"scrollUp",                    topDistance:"300",