javascript - 当用户单击 MENU 按钮时滚动到带有 ID 的元素(如果其子页面也重定向到另一个页面)

Question

我正在与具体问题作斗争。我在不同的文件中有一个菜单，并将其包含到每个子站点中。 (以避免重复)如果用户单击某些按钮，我还需要将用户滚动到网站上。

换句话说:

• 如果用户点击主页:将他重定向到页面:默认
• 如果用户点击菜单 REF:将他重定向到 Page:default#ref
• 如果用户点击登录:将他重定向到页面:登录
• 如果用户点击“JOBS”:将他重定向到页面:default#jobs

hrefs 如下:n:href="Page:default#jobs" 是 Nette 框架功能，但这不是 Nette 问题，因为它基本上只是替换类似:index.html#jobs

我如何滚动如下所示:

<script>
    jQuery(document).ready(function($) {
        $('a[href^="#"]').bind('click.smoothscroll',function (e) {
            e.preventDefault();
            var target = this.hash,
            $target = $(target);

            $('html, body').stop().animate( {
                'scrollTop': $target.offset().top-40
            }, 900, 'swing', function () {
                window.location.hash = target;
            } );
        } );
    } );
</script>

问题是什么:
当放置某个 id 时，此 JQUERY 函数只想向下滚动到某个 ID。但不幸的是，当用户处于例如jobs.php 并单击菜单转到index.php#ref

有人可以帮我解决这个问题吗？我愿意寻求任何建议或替代方案，不需要像下面的代码那样。

附:现代浏览器可以使用简单的 index.php#ref 直接访问带有 href 和主题标签的 id，不幸的是，这只是直接打开网站，没有任何滚动效果。

Answer 1

假设您重定向到另一个页面，例如:default.php#jobs，所有可以执行动画滚动的页面都必须包含以下内容:

jQuery(document).ready(function() {
    // check if exist the hash inmmediatly
    if(window.location.hash){
        // get the hash
        var target = window.location.hash;
        $('html, body').stop().animate( {
             // here you need the top atribute, in your example is $(target).offset(), but this is an object, we need extract the top
            'scrollTop': $(target).offset().top-40
        }, 1900);   
    };
}