JQuery锚定效果不能正常工作

时间：2019-07-24 作者：Dario B.

我有以下提供锚定效果的脚本：

// Smooth scrolling when clicking on a hash link
    $(\'a[href*="#"]\').on(\'click\', function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        if ($(window).width() > 1023) {
            var $scrollTop = $target.offset().top - 120;
        } else {
            var $scrollTop = $target.offset().top;
        }

        $(\'html, body\').stop().animate({
            \'scrollTop\': $scrollTop
        }, 900, \'swing\');
    });
问题是，这只在主页上有效，但在其他页面上无效，因为我需要提供web链接（www.url.com/#anchor）。但如果我这样做，效果就不适用了。例如，有人知道如何增加效果get_site_url (\'/#anchor/\'); , 所以这总是以web的url为基础？

我希望我表达得很好。问候和感谢

1 个回复
最合适的回答,由SO网友:kero 整理而成

CSS现在具有属性scroll-behavior （有浏览器支持but not so great). 您可以将其用作described here:

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
如果这对你不起作用，你就只能用JS了。问题是，在加载新页面时，浏览器会自动跳转到片段的位置。但有一个解决方法described in this StackOverflow answer:

// to top right away
if (window.location.hash) scroll(0,0);
// void some browsers issue
setTimeout(function() { scroll(0,0); }, 1);

$(function() {
    // *only* if we have anchor on the url
    if(window.location.hash) {
        // smooth scroll to the anchor id
        $(\'html, body\').animate({
            scrollTop: $(window.location.hash).offset().top + \'px\'
        }, 1000, \'swing\');
    }

});

标签： menus   jquery   urls   小码农  

相关推荐

如何将JQuery加载到Head标记之上

我的网站和插件在HTML标记之间插入了一些jquery代码，而且无论我做什么，都会在标题部分插入jquery作为第一个脚本，我无法让它工作我试过了function use_jquery_from_google () { if (is_admin()) { return; } global $wp_scripts; if (isset($wp_scripts->registered[\'jquery\']