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

时间:2015-07-08 13:40:35

标签: javascript jquery url scroll hyperlink

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

http://disputebills.com

但是,我对“单页网站”的问题是锚链接不会在谷歌上用作附加链接。我通过添加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/

2 个答案:

答案 0 :(得分: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();
    });
});

答案 1 :(得分:1)

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

重定向到主页面
header('Location: xxx.php');