zoukankan      html  css  js  c++  java
  • 跨页面锚点定位与滑动到一定距离出现回到顶部按钮

    从页面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>

  • 相关阅读:
    [大山中学模拟赛] 2016.9.17
    [DP优化方法之斜率DP]
    Gengxin讲STL系列——String
    小班讲课之动态规划基础背包问题
    ubuntu安装体验
    小班出题之字符串基础检测
    G
    B
    小项目--反eclass
    树--天平问题
  • 原文地址:https://www.cnblogs.com/123lucy/p/6439356.html
Copyright © 2011-2022 走看看