javascript - jquery平滑滚动问题

Question

我有一个 jquery 问题，需要一些帮助，但似乎找不到任何解决我的问题的结果。我有一个 1 页网站，它使用下面的 jquery 平滑滚动到 anchor 链接。唯一的问题是，当它在移动设备上时，我需要调整滚动以获得顶部 -170px 的赤字。如何使用下面的相同功能仅定位移动查询？

$(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
    }, 700);
    return false;
  }
}
});
});

Answer 1

我可以为您提供两种选择:

您可以加载 JS 库来检查您使用的浏览器/设备。 https://github.com/rafaelp/css_browser_selector 。这会在 HTML 元素上加载一个类，您可以像这样在函数中检查该类:

    $(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) {
                    if($('html').hasClass('mobile')) {
                        $('html, body').animate({
                            scrollTop: target.offset().top - 170
                        }, 700);
                    } else {
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 700);
                     }
                     return false;
                 }
             }
        });
    });

或者您可以检查窗口大小以检查它是否低于平板电脑:

    $(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) {
                    if($(window).width() < 768) {
                        $('html, body').animate({
                            scrollTop: target.offset().top - 170
                        }, 700);
                    } else {
                        $('html, body').animate({
                            scrollTop: target.offset().top
                        }, 700);
                     }
                     return false;
                 }
             }
        });
    });