• 跨页面锚点定位与滑动到一定距离出现回到顶部按钮


    从页面1跳转到页面2,需要定位到页面2的某个地方

    页面1代码:<a href="yemian2.html#1"></a>

    页面2要被定位显示的地方外套一个ID为1的div

    页面2代码:<div id="1">

                          <a href="#1"></a>

                          <div>我是要被定位显示的地方</div>

                    </div>

     滑动一定距离才会出现回到顶部按钮

    jquery代码:

    $(window).bind('scroll', function () {
      var juli = $(document).scrollTop();//获取当前滑动条距离顶部的距离
      if (juli > 500) {           //判断滑动条与顶端的距离是不是大于500
        $(".hdb").show();       //如果大于500,显示回到顶部的按钮
      }
      else {
        $(".hdb").hide();        //如果小于500,隐藏回到顶部的按钮
      }
    });

    点击回到顶部【动态】: 

    $(".hdb").click(function () {
      $('body,html').animate({ scrollTop: 0 }, 1000);
    });

    PS:回到顶部按钮:<a href="#" class="hdb" style="display: none;">回到顶部</a>

  • 相关阅读:
    全选、反选和不选
    树状图
    年月日选择器
    细谈HTML5
    再谈HTML
    FlashFXP 破解代码
    文件上传示例
    PHP聊天室框架
    JS判断是否来自手机移动端的访问,并跳转
    JQUERY知识总结
  • 原文地址:https://www.cnblogs.com/123lucy/p/6439356.html
Copyright © 2020-2023  润新知