【问题标题】:On click scroll to the top with 100px more单击时滚动到顶部,再增加 100 像素
【发布时间】:2016-09-03 23:16:25
【问题描述】:

我使用一页网站,当我单击菜单按钮时,它会向下滚动到某个 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);
    });
});

【问题讨论】:

  • scrollTop:x -> scrollTop:x - 100?
  • @Sarma 请检查我的答案。

标签: javascript jquery


【解决方案1】:

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

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

获取第一个元素的当前坐标,或设置匹配元素集中每个元素相对于文档的坐标。 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>

【讨论】:

  • @Sarma 我已经为你写了一个 sn-p。我不确切知道您要解决什么,但这似乎有效。请注意,我已删除 $(this.hash) 以使我的示例正常工作。如果需要,可以添加回来。
  • 我需要添加 - LOL 不是 +
  • 这不像你回答我,因为你回答了我用 + 而不是 - 但我会接受它。
  • @Sarma Thx,就像我说的那样,我们谈话时我也忘记了编辑它。
猜你喜欢
  • 1970-01-01
  • 2012-09-25
  • 2021-06-26
  • 2012-10-25
  • 2014-10-18
  • 2010-11-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多