zoukankan      html  css  js  c++  java
  • 返回顶部实现方式

    1锚链接的实现

    <a id="backBtn"
    style="

      position:fixed;top:75%;left:50%;

      text-decoration:none; 

      cursor:pointer;

      margin-top:-50px;

      margin-left:640px;padding:3px 4px;

      40px;text-align:center;border:1px solid #e0e0e0;

      background:#fff;display: none;"

    href="#nav">顶部</a>

    href 对应顶部nav的定位容器id值。当出现滚动时,高度大于900,返回顶部按钮显示,否则隐藏。

    var $body = $('html, body');
    var W= window,D=document;
    var backtopBtn = $('#backBtn');

    $(window).scroll(function () {
      backtopShow();
    });
    function backtopShow() {
      var top = W.pageYOffset || D.documentElement.scrollTop || D.body.scrollTop;
      if(top>900){
        backtopBtn.fadeIn(100);
      }else {
        backtopBtn.fadeOut(100);
      }
    };

    方法二:

    引用jquery库和jquery.goup.min.js到你的页面,调用插件即可。

    $(document).ready(function () {
      $.goup({
      trigger: 100,
      bottomOffset: 150,
      locationOffset: 30,
      containerColor:'#444'
    });
    });

  • 相关阅读:
    为什么和什么是 DevOps?
    使用jmeter 上传文件
    jmeter 获取执行脚本的路径
    随笔(九)
    随笔(八)
    随笔(七)
    随笔(六)
    随笔(五)
    随笔(四)
    随笔(三)
  • 原文地址:https://www.cnblogs.com/MianShan/p/6264835.html
Copyright © 2011-2022 走看看