jquery平滑滚动问题

时间:2016-05-17 10:44:15

标签: javascript jquery

我有一个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;
  }
}
});
});

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

I can provide 2 options for you:

You can load a JS library to check which browser/device you are on. https://github.com/rafaelp/css_browser_selector. This loads a class on the HTML element which you can check in your function like this:

    $(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;
                 }
             }
        });
    });

Or you can check the window size to check if it's lower then tablet:

    $(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;
                 }
             }
        });
    });

答案 2 :(得分:0)

这对我来说很好,正确传递id,它可以正常工作

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

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

        });