单击时，重定向到新页面并滚动到该新页面上的特定 div答案

【问题标题】：On click,redirect to a new page and scroll to a particular div on that new page单击时，重定向到新页面并滚动到该新页面上的特定 div
【发布时间】：2018-10-02 17:58:04
【问题描述】：

要求：我想通过单击按钮重定向到新页面，然后我想滚动到新页面上的特定部分。

问题：

这就是我当前重定向的方式

 <div class="button know-more-btn">  
    <a href="/about-us#Who-We-Are" target="" class="btn-link btn-small">
    KNOW MORE</a>
    </div>

现在一旦点击按钮重定向，我希望它滚动到新页面上的特定部分。

我目前正在尝试使用以下代码来实现这种情况：-

$('.know-more-btn').click(function () {
   if(location.hash == "#Who-We-Are"){
    $('html, body').animate({
    scrollTop: $(".map-section").offset().top
}, 1000);
}
});

所以在点击 know-more-btn 时，它应该检查 location.hash 并滚动到新页面上的 map-section div 类。

但它只会重定向而不滚动到所需的部分。

请帮我解决这个问题。

【问题讨论】：

标签： javascript jquery scroll scrollview

【解决方案1】：

您的代码：

$('.know-more-btn').click(function () {
   if(location.hash == "#Who-We-Are"){
    $('html, body').animate({
    scrollTop: $(".map-section").offset().top
}, 1000);
}
});

新代码：

   if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
   }, 1000);


   $('.know-more-btn').click(function () {
      if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
     }, 1000);
    }
   });

【讨论】：

但是 location.hash 只会返回 "#Who-We-Are" 。我想在重定向到 /about-us#Who-We-Are 后滚动到一个名为 .map-section 的特定 div .我将如何滚动到那个特定的 div 是我的问题
@amy 我刚刚专门为#Who-We-Are 更新了我的代码，试一试
@amy 刚刚从您的点击事件中复制了if 到上面，所以当页面加载并且哈希在那里时，它将触发if
您的代码滚动到 who-we-are 部分。我希望它转到同一页面上的特定 div (.map-section)。我的要求是点击知道更多按钮，我希望它将它重定向到 about-us#Who-We-Are（它显然是这样做的）然后滚动到 div（.map-section），它是 who-we-are 页面的一部分.
如果此代码if(location.hash == "#Who-We-Are"){ $('html, body').animate({ scrollTop: $(".map-section").offset().top }, 1000); 在/about 页面中执行，对于单击know-more-btn 的用户，它将滚动到.map-section

【解决方案2】：

这个 jquery/javascript 代码会帮助你

    function hashchanged(){
        if(location.hash.substr(1)!='') $('html,body').animate({ scrollTop: ($('#'+location.hash.substr(1)).position().top-200) }, 'slow');
    }
    $(window).on('hashchange', function(e){
        hashchanged();
    });
    hashchanged();

这里有任何问题。

【讨论】：

【解决方案3】：

您不需要 jQuery，每个 HTMLElement 都有一个内置方法，称为 scrollIntoView

将以下脚本添加到您的“关于我们”页面：

const map = document.querySelector('#Who-We-Are .map-section')

// simulates arriving at #Who-We-Are for the purpose of this example
window.location.hash = 'Who-We-Are';

addEventListener('DOMContentLoaded', event => {
  if (window.location.hash === 'Who-We-Are') {
    map.scrollIntoView({behavior: "smooth", block: "start"});
  }
});

#Who-We-Are {
  margin-top: 110vh;
}

.map-section {
  margin-top: 20vh;
}

<section id="Who-We-Are">
  <h2>Who We Are</h2>
  <div class="map-section">Map</div>
</section>

【讨论】：

我想滚动到 about-us#Who-We-Are 页面上的特定部分 ('.map-section') div
在这种情况下，只需选择要滚动到的特定元素。答案已更新。

【解决方案4】：

这是我以前从未见过的最佳解决方案。也许这对你有帮助。

下面是我想要在点击链接时重定向的页面的代码。

<div ><a onclick="myHash()"></a></div>

这是重定向到一个新页面并通过 url 发送哈希。

     function myHash() {
      $(document).ready(function () {
                
                  window.location.href="contact.html#link"
      });
  }

     }

在我想要打开的新页面上并滚动到特定的 div。

<div id="link"></div>

并使用 url 的哈希在新页面上滚动特定的 div

 $(document).ready(function() {    
    if (window.location.hash) {
           setTimeout(function() {
               $('html, body').scrollTop(0).show();
               $('html, body').animate({
                   scrollTop: $(window.location.hash).offset().top
                   }, 1500)
           }, 0);
       }
       
   });

【讨论】：