Question

我有一个带有部分和侧边栏的子页面，其中包含每个页面上每个部分的链接。我正在滚动到他们每个人：

function scrollToElement(element) {
  if($(element) && $(element).offset()) {

    $('html,body').animate({
      scrollTop: $(element).offset().top - 80
    });
  }
}

$('.anchor-links').click(function() {
  var element = $(this).attr('id').split('-');

  if (element[0] == 'download') {
    $("html, body").animate({
      scrollTop: 0
    });
  } else {
    scrollToElement('#' + element[0]);
  }
});

这是每页边栏中的链接：

<div class="slideout-menu">
  <ul>
    <li>
      <a href="/subpage#download" class="anchor-links" id="download-link">Last ned</a>
    </li>
    <li>
      <a href="/subpage#about" class="anchor-links" id="about-link">Om oss</a>
    </li>
    <li>
      <a href="/subpage#faq" class="anchor-links" id="faq-link">Spørsmål og svar</a>
    </li>
    <li>
      <a href="/subpage#contact" class="anchor-links" id="contact-link">Kontakt</a>
    </li>
    <li>
      <a href="/all">Se alle magasiner</a>
    </li>
  </ul>
</div>

这是我的子页面：

<div class="background-container show-for-medium" id="download">
  <img src="/uploads/{{ $subpage->cover }}" alt="" />
</div>

@section('topBar')
  @include('customer.layouts.partials.top-bar')
@show

<div class="panel">
  @section('alexBox')
    @include('customer.layouts.partials.alex-box')
  @show

  @section('availability')
    @include('customer.layouts.partials.availability-info')
  @show
</div>
<section class="row faq">
  <div class="small-12 medium-10">
    <div class="subpage-section" id="about">
      {!! $subpage->about !!}
    </div>
    <div class="subpage-section" id="faq">
      {!! $subpage->faq !!}
    </div>
    <div class="subpage-section" id="contact">
      {!! $subpage->contact !!}
    </div>
  </div>
</section>

由于navbar有height 80px，我已在脚本中设置它以滚动到导航到除下载以外的每个部分的navbar这是最重要的部分。当我在小屏幕上导航到另一个页面的某个部分时，它不会一直滚动到导航栏的底部，所以我可以看到上面部分的内容。这只发生在小屏幕上，只在从另一个页面导航到某个部分时，如果我在同一页面上或从大屏幕上的另一个页面导航，那么它工作正常。当我console.log($(element).offset().top);时，当我从另一个页面导航到部分时，我会得到不同的值，然后是：

983.46875

当我在子页面上时，它就是：

1151.46875

这是我记录的地方：

function scrollToElement(element) {
  if($(element) && $(element).offset()) {
    console.log($(element).offset().top);
    $('html,body').animate({
      scrollTop: $(element).offset().top - 80
    });
  }
}

因为，我动态创建并隐藏了子页面上的一些元素，我认为错误的偏移来自于此，因为我猜它在创建所有元素之前获得了偏移量。这是执行该操作的脚本：

//switch app and google store buttons
function shopButtons () {
  if (navigator.userAgent.match(/Android/i)) {
    $('.js-store-link').attr('href', 'https://play.google.com/store/apps/details?id=myapp.areader');
    $('.js-store-img').attr('src', '/img/google-store.svg');
  }

  if (navigator.userAgent.match(/iPhone|iPod/i)) {
    $('.js-store-link').attr('href', 'https://itunes.apple.com/no/app/myapp+/id777109367?mt=8');
    $('.js-store-img').attr('src', '/img/app-store.svg');
  }

}

$(document).ready(function(){
shopButtons();

  $.ajax({
    url: 'https://apiEndpoint/13/salesposter.json' ,
    data : { search: 'test' },
    dataType: 'json',

    success : function(json) {
      var partner = json.partner;
      var posterName = json.name;
      $('#posterName').text(posterName);
      var metaArray = json.metadata;
      $('.meta3').attr('href', metaArray[0].value);
      $('.spid-login').attr('href', 'https://payment.schibsted.no/flow/login/');

      metaArray.forEach(function(item, index, array){
        $('.meta'+item.prio).html(item.value);
      });
    }
  });

  //hide store buttons in alex box on subpages
  if (window.location.pathname.includes('/subpage')) {
    var element = $('#' + window.location.hash.substr(1));
    scrollToElement(element);
    $('.js-alex-box-store-buttons').hide();
  }
});

但不确定如何解决这个问题？我尝试使用scrollElement()函数将来自此脚本的调用包装到window.onload，以便在页面完全加载后执行，但这没有帮助，函数不是＆＃39;然后打电话。我还尝试将整个函数放在success调用的ajax方法中，但随后它一直滚动到顶部。

Answer 1

正如您的评论所述，您需要使用固定导航栏的javascript。你需要等到element is defined。否则你会得到他的null-pointer-exception。因此，您只能在scrollToElement()函数或更高版本中执行document.ready。

metaArray.forEach(function(item, index, array) {     
    $('.meta'+item.prio).html(item.value); 
});

是异步的。当您使用.meta-elements滚动到您的元素时，我认为document.ready在scrollToElement(...)没有高度。尝试将该功能添加到success:功能中。

jQuery示例：

＆＃13;

var isSubpage = window.location.pathname.indexOf("subpage") >= 0;
$(document).ready(function() {
  var element = window.location.hash;
  scrollToElement(element);

  $('.anchor-links').click(function(event) {
    if(isSubpage){
      event.preventDefault()
      var element = $(this).attr('id').split('-');

      if (element[0] == 'download') {
        $("html, body").animate({
          scrollTop: 0
        });
      } else {
        scrollToElement('#' + element[0]);
      }
    }
  });
});

function scrollToElement(element) {
  if($(element) && $(element).offset())
  $('html,body').animate({
    scrollTop: $(element).offset().top - 80
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideout-menu">
  <ul>
    <li>
      <a href="/subpage#download" class="anchor-links" id="download-link">Last ned</a>
    </li>
    <li>
      <a href="/subpage#about" class="anchor-links" id="about-link">Om oss</a>
    </li>
    <li>
      <a href="/subpage#faq" class="anchor-links" id="faq-link">Spørsmål og svar</a>
    </li>
    <li>
      <a href="/subpage#contact" class="anchor-links" id="contact-link">Kontakt</a>
    </li>
    <li>
      <a href="/all">Se alle magasiner</a>
    </li>
  </ul>
</div>

＆＃13;

Javascript - 在页面加载后滚动到元素

1 个答案: