Question

问题是我的滚动功能无法在不同的屏幕分辨率上正确滚动。问题来自offset。有什么办法可以使offset达到百分比？例如，我尝试过-10％，但没有成功。

$(".scrollto_home").click(function (event) {
    event.preventDefault();

    var defaultAnchorOffset = 0;

    var anchor = $('#home').attr('data-attr-scroll');

    var anchorOffset = $('#home').attr('data-scroll-offset');
    if (!anchorOffset)
        anchorOffset = defaultAnchorOffset;
    $('html,body').animate({
        scrollTop: $('#home').offset().top - 100 - anchorOffset
    }, 500);
});

问题在于，当以1920x1080的较小分辨率进行滚动时，滚动条会走得太远

Answer 1

您可以尝试这种方式。使用超时功能

setTimeout(function(){
   $('html body').animate({
     scrollTop: $('#home')[0].scrollHeight
         },400);
},600);

Answer 2

因此，假设您要在锚点下方/上方滚动（屏幕高度的10％）。您只需将偏移量设置为：

let percentage = 10;
let offset = window.innerHeight / 100 * percentage;

，然后根据要在其上方还是下方滚动来添加或减去该偏移量。

要在获得屏幕高度时获得良好的浏览器兼容性，请参阅this。

注意：我不是以前使用jQuery的人，所以告诉我是否缺少某些东西

注2： 如果您的jQuery有问题，请考虑创建一个有效的JsFiddle，以便我可以测试^^：）< / p>

根据屏幕尺寸偏移到顶部滚动

2 个答案: