jquery 平滑滚动到另一页面中的锚

rta7y2nd 于 2022-11-22 发布在 jQuery

关注(0)|答案(3)|浏览(153)

我已经想出了如何平滑滚动从一个链接到一个锚，但它是在同一个页面内工作。
For example, if I am in the home page, this link will smooth scroll: mysite.com/#section
但是如果我在关于页面（ mysite.com/about ），到主页的相同链接（ mysite.com/#section ）将不会平滑滚动，只是普通的默认值。
目前为止，我有这样一条消息：

jQuery('a').click(function(){
    jQuery('html, body').animate({
        scrollTop: jQuery( this.hash ).offset().top
    }, 500);
});

中的每一个
我没办法了，请帮帮忙

jquery

来源：https://stackoverflow.com/questions/72212354/smooth-scrolling-to-an-anchor-in-another-page

3条答案

按热度按时间

bzzcjhmw1#

您需要使用CSS：演示版

html {
  scroll-behavior: smooth;
}

赞(0）回复(0）举报 2022-11-22

djp7away2#

下面是为我工作的代码，以防有人在寻找答案：

jQuery(document).ready(function() {

    // Scrolling for anchor links in within the same page
    jQuery('a[href*="#"]:not([href="#"])').click(function(){
        _hash = this.hash;
        _scroll_it( _hash );
    });

    // scrolling for anchor links coming from a different page
    var _hash = window.location.hash;
    if( _hash.length > 0 ){     
        window.scrollTo(0, 0);
        
        setTimeout( function() { 
            _scroll_it( _hash );
        }, 500 );       
    }
    
    function _scroll_it( _hash ){
        jQuery('html,body').animate({
            scrollTop: jQuery( _hash ).offset().top
        }, 500 );
    }

});

赞(0）回复(0）举报 2022-11-22

brjng4g33#

试试看，检查URL中是否有#section，然后滚动到目标。

if(window.location.hash != '' && window.location.hash != '#') {
  let target = window.location.hash;

  if(!$(target).length) {
    return;
  }
  
  $('html, body').animate({
    scrollTop: $(target).offset().top
  });
}

if(!$(target).length)很重要，如果页面上没有具有正确id的div，则可能会出现错误。

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 平滑滚动到另一页面中的锚

3条答案

相关问题

热门标签

最新问答