Javascript 当用户单击菜单按钮时，滚动到ID为的元素（如果是子页面，也重定向到另一个页面）

我为具体问题而斗争。 我有一个菜单在不同的文件，包括它的每个子网站。（为了避免重复我自己）而且如果用户单击某些按钮，我还需要将其滚动到站点上

换言之：

• 如果用户单击主页：将其重定向到页面：默认
• 如果用户单击菜单REF：将其重定向到页面：默认#REF
• 如果用户单击登录：将其重定向到页面：登录
• 如果用户单击作业：将其重定向到页面：默认#作业

类似于：

n:href=“Page:default#jobs”

的href是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>

jQuery（文档）.ready（函数（$）{
$（'a[href^=“#“]”）.bind（'click.smoothscroll'，函数（e）{
e、 预防默认值（）；
var target=this.hash，
$target=$（target）；
$（'html，body'）.stop（）.animate（{
'scrollTop'：$target.offset（）.top-40
}，900，“摆动”，功能（）{
window.location.hash=目标；
} );
} );
} );

问题是什么：
这个JQUERY函数只想在放入某个ID时向下滚动到某个ID。但不幸的是，当用户位于例如jobs.php并单击菜单转到index.php#ref时，这并没有帮助

有人能帮我解决这个问题吗？ 我正在寻求任何建议或替代方案，不需要如下代码所示

---

p、 美国的现代浏览器可以使用href和简单的

index.php#ref

标签直接访问某个id。不幸的是，这只是直接打开网站，没有任何滚动效果。

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

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

---

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

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

---

将此脚本包含到您希望动画滚动的每个页面

$(document).ready(function(){
    if( window.location.hash != "" ){
        window.scrollTo(0, 0); // denies initial scroll to #

        $target = $(window.location.hash);

        $('html, body').stop().animate( {
            'scrollTop': $target.offset().top-40
        }, 900, 'swing');
    }
});

---

将此脚本包含到您希望动画滚动的每个页面

$(document).ready(function(){
    if( window.location.hash != "" ){
        window.scrollTo(0, 0); // denies initial scroll to #

        $target = $(window.location.hash);

        $('html, body').stop().animate( {
            'scrollTop': $target.offset().top-40
        }, 900, 'swing');
    }
});

---

您好@Petr Hejda，谢谢您的回答，不过这会让我联想到：未捕获引用错误：$未定义在哪行？如果在$（文档）上，则在定义jQuery之前包含脚本，只需在jQuery之后包含脚本。您是对的，它不再抛出错误，但也不会滚动：（我是否错过了其他内容？准备在聊天中继续交流？好的，我想我知道哪里有问题，在我第一次加载带有哈希标记的页面时，此函数可以正常工作，例如，如果我使用index.php打开页面？#作业，它会正确地向下滚动以查找作业。但如果我从菜单中单击它，它将不起作用。）（Hi@Petr Hejda，谢谢你的回答，不过这是抛出我：Uncaught ReferenceError:$没有定义在哪一行？如果在$（文档）上，那么你在定义jQuery之前包含脚本，只需要在jQuery之后包含它。你是对的，它不再抛出错误，但也不会滚动：（我是否错过了其他内容？准备在聊天中继续交流？好的，我想我知道哪里有问题，在我第一次加载带有哈希标记的页面时，此函数可以正常工作，例如，如果我使用index.php打开页面？#作业，它会正确地向下滚动以查找作业。但如果我从菜单中单击它，它将不起作用。）（Hi@dexering，谢谢你的asnwer，不幸的是，这个throw me:SyntaxError:missing）在参数列表之后，请检查一些非常简单的浏览器控制台，如下所示：Hi@dexering，谢谢你的asnwer，不幸的是，这个throw me:SyntaxError:missing）在参数列表之后，请检查一些非常简单的浏览器控制台，如下所示：