Question

对于学校作业，我必须设计一个网站。我希望创建一个单页网站，但是，我们需要链接到不同的页面，即我们需要contact.html，我们需要链接到它。不确定它是否相关，但我也希望页面平滑滚动到导航到所需的部分

为了解决这个问题，我想我可以在点击时更改链接的位置，而不是页面上的锚点 - 但我卡住了。下面是我到目前为止提出的代码。

以下是该网站的导航部分＆nbsp; html：

<nav>
    <a href="index.html"><img alt="Logo" src="logo.svg" /></a> 
    <a href="menu.html">Menu</a>
    <a href="chef.html">Chef</a>
    <a href="location.html">Location</a>
    <a href="contact.html">Contact</a>
</nav>

使用jQuery的Javascript：

$(function() {
        $("nav").delegate("a", "click", function() {
            var target = $(this).attr("href");
            target = target.substr(0, myString.length-5);
            //console.log(target);
            alert(target);
               if (target.length) {
                 $('html,body').animate({
                     scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        });
    });

在实际页面上，即contact.html，我打算只使用相关锚点重定向到主页面

JSFiddle

Answer 1

一些事情：

您应该使用.on代替委托：

$("nav").on("click", "a", function ( evt ) {

您还应该在活动中致电.preventDefault()以避免重定向：

evt.preventDefault();

在你的小提琴中，你没有导入jQuery。
最后，您使用target引用了一个字符串，但我认为您正在寻找一个jQuery对象：

scrollTop: $("[name="+target+"]").offset().top

JSFiddle

单页网站 - 使用＆＃39; fake＆＃39;链接到不同的部分网页

1 个答案: