Question

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

问题：

这是我当前重定向的方式

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

因此，在单击Known-more-btn时，它应该检查位置。哈希并滚动到新页面上的map-section div类。

但是它仅重定向并且不会滚动到所需的部分。

请帮助我解决此问题。

Answer 1

您的代码：

FileInputStream fis = new FileInputStream(new File(filePath));
                System.out.println("FileInputStream Object created..! ");
                 /* Load workbook */
                XSSFWorkbook workbook = new XSSFWorkbook (fis);
                System.out.println("XSSFWorkbook Object created..! ");
                /* Load worksheet */
                XSSFSheet sheet = workbook.getSheetAt(0);
                System.out.println("XSSFSheet Object created..! ");
                int rowCount;
                rowCount= sheet.getPhysicalNumberOfRows() ;
                System.out.println("total row: "+ rowCount);

新代码：

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

Answer 2

您不需要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>

Answer 3

此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();

这里有任何问题

Answer 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);
       }
       
   });

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

4 个答案: