手机移动端返回顶部js代码demo效果示例（整理）-阿里云开发者社区

手机移动端返回顶部js代码demo效果示例（整理）

2023-09-15 141

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 手机移动端返回顶部js代码demo效果示例（整理）

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>手机移动端返回顶部js代码</title> 
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  </head> 
  <body style="background-color: #dddfff;"> 
        <div class="headeline"></div> 
        <p style="font-size:24px;color:red;text-align: center;">手机往下滑动即可显示返回顶部按钮!</p> 
    <!--演示内容开始--> 
        <div style="height:2000px;"></div> 
    <!--演示内容结束--> 
  </body> 
  <script>
    var scrolltotop = {
      setting: {
        startline: 100, //起始行
        scrollto: 0, //滚动到指定位置
        scrollduration: 400, //滚动过渡时间
        fadeduration: [500, 100] //淡出淡现消失
      },
      controlHTML: '<img src="https://cs.m.xczhihui.com/xcview/css/minirefresh/images/minirefresh-totop.png" style="width:66px;height:66px;border:0;" />', //返回顶部按钮
      controlattrs: {
        offsetx: 30,
        offsety: 80
      }, //返回按钮固定位置
      anchorkeyword: "#top",
      state: {
        isvisible: false,
        shouldvisible: false
      },
      scrollup: function() {
        if (!this.cssfixedsupport) {
          this.$control.css({
            opacity: 0
          });
        }
        var dest = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto);
        if (typeof dest == "string" && jQuery("#" + dest).length == 1) {
          dest = jQuery("#" + dest).offset().top;
        } else {
          dest = 0;
        }
        this.$body.animate({
          scrollTop: dest
        }, this.setting.scrollduration);
      },
      keepfixed: function() {
        var $window = jQuery(window);
        var controlx = $window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs
          .offsetx;
        var controly = $window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs
          .offsety;
        this.$control.css({
          left: controlx + "px",
          top: controly + "px"
        });
      },
      togglecontrol: function() {
        var scrolltop = jQuery(window).scrollTop();
        if (!this.cssfixedsupport) {
          this.keepfixed();
        }
        this.state.shouldvisible = (scrolltop >= this.setting.startline) ? true : false;
        if (this.state.shouldvisible && !this.state.isvisible) {
          this.$control.stop().animate({
            opacity: 1
          }, this.setting.fadeduration[0]);
          this.state.isvisible = true;
        } else {
          if (this.state.shouldvisible == false && this.state.isvisible) {
            this.$control.stop().animate({
              opacity: 0
            }, this.setting.fadeduration[1]);
            this.state.isvisible = false;
          }
        }
      },
      init: function() {
        jQuery(document).ready(function($) {
          var mainobj = scrolltotop;
          var iebrws = document.all;
          mainobj.cssfixedsupport = !iebrws || iebrws && document.compatMode == "CSS1Compat" &&
            window.XMLHttpRequest;
          mainobj.$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $(
            "body")) : $("html,body");
          mainobj.$control = $('<div id="topcontrol">' + mainobj.controlHTML + "</div>").css({
            position: mainobj.cssfixedsupport ? "fixed" : "absolute",
            bottom: mainobj.controlattrs.offsety,
            right: mainobj.controlattrs.offsetx,
            opacity: 0,
            cursor: "pointer"
          }).attr({
            title: "返回顶部"
          }).click(function() {
            mainobj.scrollup();
            return false;
          }).appendTo("body");
          if (document.all && !window.XMLHttpRequest && mainobj.$control.text() != "") {
            mainobj.$control.css({
              width: mainobj.$control.width()
            });
          }
          mainobj.togglecontrol();
          $('a[href="' + mainobj.anchorkeyword + '"]').click(function() {
            mainobj.scrollup();
            return false;
          });
          $(window).bind("scroll resize", function(e) {
            mainobj.togglecontrol();
          });
        });
      }
    };
    scrolltotop.init();
  </script> 
</html>

手机移动端返回顶部js代码demo效果示例（整理）

热门文章

最新文章

相关课程

相关电子书

相关实验场景

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

手机移动端返回顶部js代码demo效果示例（整理）

热门文章

最新文章

相关课程

相关电子书

相关实验场景