Question

对于单页网站，其中一些网站如何从网址中删除#section id？

例如：http://www.formationstone.com/

没有＃＃about-us;它只是在菜单上的每个副作用点上显示根域。

我认为这可能与htaccess有关，但我无法找到相关代码，我只想在所有链接上显示我的根域。

Answer 1

网址中#之后的所有内容主要是为了浏览器的好处，而不是服务器。 .htaccess与此问题没有太大关系。

我不确定您使用的是什么SPA技术，但是像我一样使用Angular，我避免在网址中显示锚标记的方式是不是< / em>使用Angular的路由器 - 只需直接更改各个部分的可见性，即可显示和隐藏SPA的各个部分。

执行此操作的一个缺点是，用户无法为应用的特定部分添加书签，并根据他们已添加书签的网址可靠地返回该应用。

Answer 2

他们没有剥离它们，他们只是使用javascript onclick事件来阻止链接的实际默认事件并滚动到标题。如果你转到http://www.formationstone.com/#about哈希值。

我们来看看源代码。

这是菜单中的链接：

<a href="#about">WHO WE ARE</a>

这是它滚动到的

的DOM对象

<section id="about"> <h2>Who We Are</h2> ... </section>

点击监听器位于http://www.formationstone.com/wp-content/themes/Ignyte/includes/main-scripts.js?ver=4.9.5行

的第128行

jQuery('#menu a[href]').on('click', function(event) {
    if ($(this).parent().hasClass('telephone')) {}else{
    var target = jQuery(this).attr('href');
    if( target.length ) {
        event.preventDefault();
        jQuery('html, body').animate({
            scrollTop: jQuery(target).offset().top+75
        }, 1000);
    }}
});

它采用所点击链接的href属性（#about）并将其用作jQuery选择器，例如$('#about') <section>。event.preventDefault();。然后它以1秒的动画在这些部分标题下滚动75px。您正在寻找的是第145行：#about。这会阻止浏览器执行默认事件，该事件将调用URL <section id="about"> <a name="about"></a> <h2>Who We Are</h2> </section>。

附注：有两种方法可以直接调用http://www.formationstone.com/#about作品。使用命名锚：

$(document).ready(function() {
    if (window.location.hash) {
        var target = jQuery(window.location.hash);
        if( target.length ) {
            // scroll immediately without animation
            jQuery('html, body').animate({
                scrollTop: jQuery(target).offset().top+75
            });
        }
    }
});

或者使用哈希监听器（这就是他们正在使用的东西，我根本找不到它）。它会是这样的：

{{1}}

单页网站，想从网址中删除#sections（给出的示例网站）

2 个答案: