从另一个页面链接页面时如何创建页面跳转

Question

我的网页上有几个部分在我滚动或单击侧面导航栏上的特定链接时变得活跃。当我从另一个页面访问此页面时，我想跳转到某个部分，而无需再次向下滚动。

这是 HTML 代码

    <div class="container">
      <div class="outer-nav--return"></div>
      <div id="viewport" class="l-viewport">
        <div class="l-wrapper">
          
          <nav class="l-side-nav">
            <ul class="side-nav">
              <li class="is-active"><span>1</span></li>
              <li><span>2</span></li>
              <li><span>3</span></li>
              <li><span>4</span></li>
            </ul>
          </nav>
          <ul class="l-main-content main-content">
            <li class="l-section section section--is-active">
            /* CONTENT 1*/
            </li>
            <li class="l-section section">
            /* CONTENT 2*/
            </li>
            <li class="l-section section">
            /* CONTENT 3*/
            </li>
            <li class="l-section section" id="contactmi">
            /* CONTENT 4*/
            </li>
          </ul>
      </div>
      </div>
    <ul class="outer-nav">
      <li class="is-active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>      
   </ul>
  </div>

这里是我用来在这些部分之间导航的 JavaScript 函数。

$( document ).ready(function() {

  var canScroll = true,
      scrollController = null;
  $(this).on('mousewheel DOMMouseScroll', function(e){
    if (!($('.outer-nav').hasClass('is-vis'))) {
      e.preventDefault();
      var delta = (e.originalEvent.wheelDelta) ? -e.originalEvent.wheelDelta : e.originalEvent.detail * 20;
      if (delta > 50 && canScroll) {
        canScroll = false;
        clearTimeout(scrollController);
        scrollController = setTimeout(function(){
          canScroll = true;
        }, 800);
        updateHelper(1);
      }
      else if (delta < -50 && canScroll) {
        canScroll = false;
        clearTimeout(scrollController);
        scrollController = setTimeout(function(){
          canScroll = true;
        }, 800);
        updateHelper(-1);
      }

    }

  }, {passive: false});

  $('.side-nav li, .outer-nav li').click(function(){

    if (!($(this).hasClass('is-active'))) {

      var $this = $(this),
          curActive = $this.parent().find('.is-active'),
          curPos = $this.parent().children().index(curActive),
          nextPos = $this.parent().children().index($this),
          lastItem = $(this).parent().children().length - 1;
      updateNavs(nextPos);
      updateContent(curPos, nextPos, lastItem);
    }
  });
  

  $(document).keyup(function(e){
    if (!($('.outer-nav').hasClass('is-vis'))) {
      e.preventDefault();
      updateHelper(e);
    }
  }, {passive: false});

  function updateHelper(param) {
    var curActive = $('.side-nav').find('.is-active'),
        curPos = $('.side-nav').children().index(curActive),
        lastItem = $('.side-nav').children().length - 1,
        nextPos = 0;
    if (param.type === "swipeup" || param.keyCode === 40 || param > 0) {
      if (curPos !== lastItem) {
        nextPos = curPos + 1;
        updateNavs(nextPos);
        updateContent(curPos, nextPos, lastItem);
      }
      else {
        updateNavs(nextPos);
        updateContent(curPos, nextPos, lastItem);
      }
    }
    else if (param.type === "swipedown" || param.keyCode === 38 || param < 0){
      if (curPos !== 0){
        nextPos = curPos - 1;
        updateNavs(nextPos);
        updateContent(curPos, nextPos, lastItem);
      }
      else {
        nextPos = lastItem;
        updateNavs(nextPos);
        updateContent(curPos, nextPos, lastItem);
      }
    }
  }

  function updateNavs(nextPos) {
    $('.side-nav, .outer-nav').children().removeClass('is-active');
    $('.side-nav').children().eq(nextPos).addClass('is-active');
    $('.outer-nav').children().eq(nextPos).addClass('is-active');
  }

  function updateContent(curPos, nextPos, lastItem) {
    $('.main-content').children().removeClass('section--is-active');
    $('.main-content').children().eq(nextPos).addClass('section--is-active');
    $('.main-content .section').children().removeClass('section--next section--prev');

    if (curPos === lastItem && nextPos === 0 || curPos === 0 && nextPos === lastItem) {
      $('.main-content .section').children().removeClass('section--next section--prev');
    }
    else if (curPos < nextPos) {
      $('.main-content').children().eq(curPos).children().addClass('section--next');
    }
    else {
      $('.main-content').children().eq(curPos).children().addClass('section--prev');
    }

    if (nextPos !== 0 && nextPos !== lastItem) {
      $('.header--cta').addClass('is-active');
    }
    else {
      $('.header--cta').removeClass('is-active');
    }
  }
}, {passive: false});

现在我想如何从另一个页面创建一个直接转到内容部分 D 的链接，而不是让我在到达此页面后向下滚动到它。

Answer 1

您可以使用简单的Anchor 来做到这一点，例如：

首页：

<a href="page1.html#section1">Page 1</a>
<a href="page2.html#section2">Page 2</a>

第二页：

<div id='section1'></div>
<div id='section2'></div>

---

评论后编辑：

您可以使用window.location.hash 喜欢：

window.location.hash = "jump_to_this_location";

例子：

window.location.hash = "jump_to_this_location";

<div style="height: 4000px">uygyuguyguyguyguyg</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<span id='jump_to_this_location'>Jump here!</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="height: 4000px">tyfytfytfytfytfytf</div>