Question

我正在尝试创建一个单页网站，其中导航元素用于滚动到页面的特定部分：

但是，我对“单页网站”的问题是锚链接不会在谷歌上用作附加链接。我通过添加schema.org标记尝试了以下内容，看看是否有所不同，但似乎谷歌不会在谷歌搜索结果中注册附加链接的锚点。

导航示例：

             <nav role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">
                <ul>
                    <li class="hidden active"><a class="page-scroll" href="#what" itemprop="url">What</a>
                    </li>
                    <li><a class="page-scroll" href="#works" itemprop="url">How It Works</a> </li>
                    <li><a class="page-scroll" href="#who" itemprop="url">Who</a>
                    </li>
                    <li><a class="page-scroll" href="#why" itemprop="url">Why</a>
                    </li>
                </ul>
             </nav>

我希望以上内容显示为这样的附加链接：

site links in google

我目前用来滚动页面上的部分的javascript代码是：

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

我尝试创建实际页面并将锚点更改为实际链接，但我不确定是否可以禁用这些链接以保持页面滚动工作。

所以基本上新的导航链接看起来如下，但它们实际上不会直接指向该页面，它们只会滚动到同一页面上的部分：

<a class="page-scroll" href="what" itemprop="url">What</a>

我知道链接可以通过几种不同的方式禁用，但使用javascript（void）;或其他类似的方法不起作用，因为这些必须是真正的链接。有关如何实现这一目标的任何建议吗？

以下是一个例子：

http://codepen.io/candid/full/mJxZda/

Answer 1

您可以保留代码并阻止事件发生：

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        event.preventDefault(); //This will do the magic
        $anchor.parent().addClass("active").siblings().removeClass("active");
        $('html, body').stop().animate({
            scrollTop: $("#" + $anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Answer 2

我可以建议您的网站略有不同的架构吗？创建单独的页面，保持代码按原样使单页面布局工作以滚动到页面内锚点，并在页脚中包含一个站点地图，其中包含指向不同页面的链接。这将保持您正在尝试执行的单页滚动。然后，Google链接可以转到实际页面，然后可以使用php

重定向到主页面

header('Location: xxx.php');

是否可以使用javascript / jquery来禁用链接重定向？

2 个答案: