链接到同一页面上的锚点减去一些像素

托比亚斯·格劳斯(Tobias Glaus)

我将平滑滚动集成到了页面的锚点中。它非常适合以下代码:

$(function() {
      $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });

现在,当我单击链接时,它会滚动到该位置。但是因为我在顶部有一个固定的菜单栏(高度:100像素),所以它与内容有点重叠。我可以以某种方式解决此问题吗?就像在代码中说的那样:滚动到减去100px的锚点...我认为它可能与

scrollTop: target.offset(-100).top

是对的吗?

艾斯比尔

jQuery的offset是只为您提供元素偏移的函数。这并不意味着要更改偏移量本身。之后只减去100px。

scrollTop: target.offset().top - 100

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

链接到同一页面上的段落

来自分类Dev

rails-链接到同一页面但具有锚点->不重新加载

来自分类Dev

如何在javascript中链接到同一页面锚

来自分类Dev

将同一页面上的锚定链接链接到Woocommerce jQuery选项卡

来自分类Dev

链接到同一页面上的另一个部分

来自分类Dev

链接到同一页面上的不同反应组件

来自分类Dev

链接到同一页面上的元素并将其居中放在窗口中

来自分类Dev

JqueryUI 1.11选项卡在同一页面上时直接链接到选项卡

来自分类Dev

jQuery / JavaScript:在同一页面的锚点上触发点击功能

来自分类Dev

表单提交后重定向到同一页面中的锚点

来自分类Dev

同一页面内的锚点无法正常工作

来自分类Dev

同一页面链接无法使用具有id锚的rawurlencode()

来自分类Dev

每次出现都将同一单词链接到同一页面吗?

来自分类Dev

我可以从一个按钮链接到另一个按钮(在同一页面上)吗?

来自分类Dev

如何在同一页面上两次连接到GoInstant?

来自分类Dev

如何在同一页面上两次连接到GoInstant?

来自分类Dev

如何在同一页面上使用锚点选项卡去一个divdiv?

来自分类Dev

链接到同一页面的另一部分

来自分类Dev

单击同一页面上的href链接加载部分视图

来自分类Dev

jQuery-如何测试链接是否在同一页面上锚定?

来自分类Dev

对同一页面上的多个链接使用Javascript灯箱效果

来自分类Dev

在同一页面上使用onClick函数从链接中获取价值

来自分类Dev

Bootstrap-在同一页面上的手风琴之间进行链接

来自分类Dev

如何将数值从链接传递到同一页面上的脚本

来自分类Dev

指向同一页面上的 ID 的锚链接不起作用

来自分类Dev

如何编写两个链接到同一页面的不同作业?

来自分类Dev

水豚-如何测试链接到同一页面的不同部分?

来自分类Dev

React:如何链接到其他组件(在同一页面中打开)

来自分类Dev

单击链接到同一页面时更改个人资料图片

Related 相关文章

  1. 1

    链接到同一页面上的段落

  2. 2

    rails-链接到同一页面但具有锚点->不重新加载

  3. 3

    如何在javascript中链接到同一页面锚

  4. 4

    将同一页面上的锚定链接链接到Woocommerce jQuery选项卡

  5. 5

    链接到同一页面上的另一个部分

  6. 6

    链接到同一页面上的不同反应组件

  7. 7

    链接到同一页面上的元素并将其居中放在窗口中

  8. 8

    JqueryUI 1.11选项卡在同一页面上时直接链接到选项卡

  9. 9

    jQuery / JavaScript:在同一页面的锚点上触发点击功能

  10. 10

    表单提交后重定向到同一页面中的锚点

  11. 11

    同一页面内的锚点无法正常工作

  12. 12

    同一页面链接无法使用具有id锚的rawurlencode()

  13. 13

    每次出现都将同一单词链接到同一页面吗?

  14. 14

    我可以从一个按钮链接到另一个按钮(在同一页面上)吗?

  15. 15

    如何在同一页面上两次连接到GoInstant?

  16. 16

    如何在同一页面上两次连接到GoInstant?

  17. 17

    如何在同一页面上使用锚点选项卡去一个divdiv?

  18. 18

    链接到同一页面的另一部分

  19. 19

    单击同一页面上的href链接加载部分视图

  20. 20

    jQuery-如何测试链接是否在同一页面上锚定?

  21. 21

    对同一页面上的多个链接使用Javascript灯箱效果

  22. 22

    在同一页面上使用onClick函数从链接中获取价值

  23. 23

    Bootstrap-在同一页面上的手风琴之间进行链接

  24. 24

    如何将数值从链接传递到同一页面上的脚本

  25. 25

    指向同一页面上的 ID 的锚链接不起作用

  26. 26

    如何编写两个链接到同一页面的不同作业?

  27. 27

    水豚-如何测试链接到同一页面的不同部分?

  28. 28

    React:如何链接到其他组件(在同一页面中打开)

  29. 29

    单击链接到同一页面时更改个人资料图片

热门标签

归档