主页 / 问题 / 735098
Accepted
pridan
Asked:2020-10-24 16:27:14 +0000 UTC2020-10-24 16:27:14 +0000 UTC

平滑滚动到另一页上的锚点

  • 772

您好，我想实现平滑滚动到位于另一个页面上的块。

为了在当前页面上平滑滚动，我使用以下代码：

  function handler(event) {
    var hash = event.target.hash;
    var headerHeight = $('header').height();

    if (hash) {
      event.preventDefault();

      var tag = $(hash);

      if ($(hash).length) {
        var offset = tag.offset().top - headerHeight;
        $('html, body').stop().animate({scrollTop: offset},'slow');
      }
    }
  }

  $('.main-nav a').on( "click", handler );

如果我指定一个指向此格式的另一个页面的链接，则会有一个过渡，并且会急剧跳转到带有 id 的块。如何使这个跳跃顺利？

javascript

2 个回答

  1. Best Answer

    有必要在进行转换的页面上放置一个脚本，该脚本将通过哈希滚动到所需的块。就像是：

    var myHash = location.hash; //получаем значение хеша
location.hash = ''; //очищаем хеш
if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение
    $('html, body').animate({scrollTop: $(myHash).offset().top}, 500); //скроллим за полсекунды
};
    • 2

  2. 它在未经授权的用户模式下对我有用（在 Drupal 上）

    (function($, Drupal) {
  $(document).ready(function () {
  });
  Drupal.behaviors.script = {
if (window.location.hash)
        scroll(0,0);
// takes care of some browsers issue
      setTimeout(function(){scroll(0,0);},1);


//your current click function
      $('.services', context).click(function () {
          e.preventDefault();
          $('html,body').animate({
            scrollTop:$($(this).attr('href')).offset().top + 'px'
          },1000,'swing');
        });

// if we have anchor on the url (calling from other page)
        if(window.location.hash){
          // smooth scroll to the anchor id
          $('html,body').animate({
            scrollTop:$(window.location.hash).offset().top + 'px'
          },1000,'swing');
        }
    }
  }
})(jQuery, Drupal);
    • 0

相关问题