点击滚动到顶部100px以上

时间:2016-09-03 23:16:26

标签: javascript jquery

我使用单页网站,当我单击菜单按钮时,它向下滚动到某个div的顶部...但因为我使用固定标题滚动到0px顶部我需要像100px顶部像填充在body标签但我需要在功能上说我需要在页面顶部100px之后滚动到项目的顶部。 这是我的代码:

jQuery(document).ready(function($) {
    $(".scroll").click(function(event){     
        event.preventDefault();
        var x = $(this.hash).offset().top;
        $('html,body').animate({scrollTop:x},2000);
    });
});

1 个答案:

答案 0 :(得分:0)

如果我理解正确的话,只需向$(this.hash).offset().top添加100px即可。

因为,偏移是获取相对于文档的数据。

  

获取第一个元素的当前坐标,或者在匹配元素集中相对于文档设置每个元素的坐标。 http://api.jquery.com/offset/

实施例



jQuery(document).ready(function($) {
  $(".scroll").click(function(event) {
    event.preventDefault();
    var x = $(this).offset().top;
    $('html,body').animate({scrollTop: x - 100 }, 2000);
  });
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body style="height: 1000px; padding-top: 100px">

<div class="scroll">click to scroll to me</div>
  
</body>
</html>
&#13;
&#13;
&#13;