Jquery 平滑滚动偏移

发布于 2024-12-08 22:44:19 字数 385 浏览 1 评论 0原文

我正在制作一个单页网站，其中心顶部有粘性导航，宽度约为 1000px，高度约为 20-25px，现在我还包括平滑滚动功能，但我的问题是每当页面滚动到其活动页面时，标题隐藏在粘性导航下方，如何获取粘性导航底部的偏移量？谢谢。

这是js代码顺便说一句：

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

原文

I'm making a one page site with sticky navigation on center top with width at about 1000px and height of about 20-25px, now i also included a smooth scroll function but my problem is whenever the page scrolls to it's active page, the title hid under the sticky nav, how do i get the offset of the bottom of the sticky navigation? Thanks.

This is the js code btw:

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

平生欢 2024-12-15 22:44:19

保持当前代码不变并将偏移添加到网站顶部的最简单方法是在 .top 之后添加所需的偏移值，如下所示：

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

希望这个答案比上一个答案简单。 :)

The easiest way to keep your current code as it is, and add that off-set to the top of your website, is by adding the needed offset value after the .top, like so:

$('a').click(function(e) {
    var target = $(this).attr('href');
    e.preventDefault();

    $('html,body').animate({
        scrollTop: $(target).offset().top - 20
    }, 800, 'easeInOutCirc');
});

Hope this answer is less complicated that the last one. :)

回复收藏 0 原文

后来的我们 2024-12-15 22:44:19

jQuery 的 .position() 方法将为您提供元素相对于页面的顶部和左侧偏移量。因此，您只需将粘性导航的 .outerHeight() 添加到其 .position().top 值即可。

这是一个示例： http://jsfiddle.net/NUfaZ/1/

当您在页面，您会看到它的位置已更新。

回复收藏 0 原文

你的往事 2024-12-15 22:44:19

参考https://codepen.io/pikeshmn/pen/mMxEdZ

做法： 我们使用 document.getElementById('header').offsetHeight 获取固定导航的高度
并将滚动偏移到该值。

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

PS：

标题和目标之间有一个漂亮的5像素差异
滚动效果不硬，相当平滑；平滑滚动

Refer to https://codepen.io/pikeshmn/pen/mMxEdZ

Approach: We get the height of fixed nav using document.getElementById('header').offsetHeight
And offset the scroll to this value.

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

P.S: