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

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

posted @ 2017-02-24 17:10  露西&哈特菲利亚  阅读(357)  评论(0编辑  收藏  举报