Question

更新：脚本和scrollTo动画现在可以正常工作。我已经上传了正确的解决方案。

我正在使用基于Bootstrap 3的网站，并且我遇到了一些scrollTo问题，这是导航栏的代码（从导航线到页面中三个不同部分的链接）：

HTML：

<header id="page-header" class="container">
    <h1> NMS website </h1>
    <img src="assets/images/group-logo.png" alt="group logo">
    <nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
        <h2> Page navigation </h2>
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#collapse'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
        </div>
        <div class='collapse navbar-collapse' id='collapse'>
            <div class="container">
                <ul class="nav navbar-nav">
                    <li><a href="#brands">Brands</a></li>
                    <li><a href="#about">About Us</a></li>
                    <li><a href="#contact-scroll">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header> <!-- end of page header -->

JavaScript（包括用于媒体查询支持的Modernizr库，我也使用了偏移，因为导航栏是固定的，默认情况下在scrollTo动画后与内容区域重叠）：

$(function () {

// making our anchors "scrollable"

var x;

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

function responsive () {


if(Modernizr.mq('(min-width: 768px)')) {    
        x = 85;
    }

if(Modernizr.mq('(max-width: 767px)')) {    
        x = 180;
    }   

}

responsive();

$(window).resize(function () {
    responsive();
});

}）;

正如您所看到的，我使用这段代码 - https://css-tricks.com/snippets/jquery/smooth-scrolling/来制作scrollTo效果。滚动功能不是很好，当我调整浏览器窗口大小时会出现问题。当我从桌面移动到移动设备（没有刷新页面）时，滚动动画不能很好地工作（它不能首先识别＆＃34;移动＆＃34;脚本，所以当我点击一个在菜单中链接它将首先从非移动脚本运行偏移量，然后它将运行移动脚本的偏移量，这将产生一个非漂亮的动画）。但是，如果我将窗口调整为移动设备，然后刷新页面（就像第一次从移动设备打开页面一样），我的滚动效果很好。同样的事情也适用于非移动窗口大小。我希望我明白这个问题？感谢。

jQuery scrollTo调整大小问题

0 个答案: