jQuery平滑滾動問題

Question

我有一個jQuery問題，我需要一些幫助，但似乎找不到解決我問題的任何結果。 我有一個1頁的網站，該網站使用下面的jquery平滑滾動以定位鏈接。 唯一的問題是，當它在移動設備上時，我需要將滾動條調整為最大-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

您可以檢查屏幕寬度，如果它小於特定寬度（例如320），則可以考慮所需的額外滾動偏移量：

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

Answer 2

我可以為您提供2種選擇：

您可以加載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;
                 }
             }
        });
    });

Answer 3

這對我來說很好，通過id正確，它正常工作

ele.on('click',function(){

            $('html, body').animate({scrollTop: $("#"+id).offset().top}, 750);

        });