• 返回顶部实现方式


    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'
    });
    });

  • 相关阅读:
    用户控件
    垃圾弟弟
    如何解决“呈现控件时出错”的问题
    IE与FireFox差距
    NavigateUrl属性绑定
    table
    firefox不支持attachEvent,attach
    转 jQuery分类 
    GridView列数字、货币和日期的显示格式
    appendChild
  • 原文地址:https://www.cnblogs.com/MianShan/p/6264835.html
Copyright © 2020-2023  润新知