> jsFiddle example <

Question

是否可以更改scrollTo锚点jQuery的偏移量？

在第一个锚点我想要一个165px的负偏移，但之后我不想要任何偏移。

我的想法类似于下面的代码，但我无法使其发挥作用：/

任何人都可以帮助我吗？

//scroll to anchor
$('a').click(function(){
    if ($(this).scrollTop() > 1400) {
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top-165
        }, 1400);
        return false;
    } else {
        $('html, body').animate({
            scrollTop: $( $(this).attr('href') ).offset().top
        }, 1400);
        return false;
    }
});

Answer 1

这可能是因为您正在.scrollTop()语句中检查元素的if与实际正文的滚动位置相对应。因为$(this).scrollTop()可能是静态的，所以if语句不会产生影响。

所以试试：

if ($('body').scrollTop() > 1400) { ..

我在jsFiddle中创建了一个示例，该示例演示如果正确定义if语句，它可以正常工作：

> jsFiddle example <

如果您将主体向下滚动到1400px以下，则滚动顶部将滚动到：

$( $(this).attr('href') ).offset().top-165

（信息div的颜色也将颜色更改为绿色;便于测试设置）

否则只会滚动到：

$( $(this).attr('href') ).offset().top

那应该可以帮到你。祝你好运。

修改

如果您只希望第一个锚具有偏移量，则可以应用以下代码：

// scroll to first anchor
$('a:first').click(function(){
    $('body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top-165
    }, 1400);
});
// scroll to other anchors
$('a:gt(0)').click(function() {
    $('body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 1400);
});

这将为第一个锚点提供scrollTop偏移165px 。

参见jsFiddle：

DEMO2

Answer 2

带滚动的自定义容器的解决方案：

 var anchor = $('.cust-container-with scroll').find('ul > li > span#unicId');
 var anchorPos = anchor[0].getBoundingClientRect().top;
 var viewPos = $('.cust-container-with scroll')[0].getBoundingClientRect().top;
 var scrollPos = anchorPos - viewPos;

 $('.cust-container-with scroll').animate({scrollTop: scrollPos}, 'slow');

Answer 3

感谢您的信息！我是在没有Jquery的情况下执行此操作的，并且似乎可以在不同的浏览器（edge，firefox，chrome）上正常工作

这是简单的html锚点：

<a class="anchorLink" name="rsc" id="rsc"></a>

在这里，魔术使用负边距顶端。如果您的标头是粘滞的，那就太完美了。

.anchorLink {
      float:left; width:100%; display:block; position:relative; margin-top:-163px;
    }

更改＆＃34;滚动到锚点＃34; offset - jquery

3 个答案:

> jsFiddle example <

修改

DEMO2