如何在HTML中调用视差站点中不同URL

Question

我有一个HTML网页的网站。这是一个单页面的网站。所有topNavigation都在同一个页面上。点击任何一个链接，我就会直接跳转到那个链接。我希望无论何时任何链接被调用，在URL中它也应该采取页面名称。请找一些相关的代码。因为我是新手，找不到确切的解决方案。

<nav id="menu-wrap" class="menu-back cbp-af-header">
<div class="container">
    <div class="sixteen columns">
        <script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
        <div class="logo"></div>
        <ul class="slimmenu">
            <li>
                <a href="torq" data-ps2id-offset="100">home</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/about" title="About Page" state='{"message":"New State!"}' data-gal="m_PageScroll2id">About</a>

            </li>
            <li>
                <a is="pushstate-anchor" href="/work" title="work Page" state='{"message":"New State!"}'>work</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/services" title="services Page" state='{"message":"New State!"}'>services</a>
            </li>
            <li>
                <a is="pushstate-anchor" href="/contact" title="contact Page" state='{"message":"New State!"}'>contact</a>
            </li>
        </ul>
    </div>
</div>

​

上面的单击调用下面的服务部分

<section class="services" id="services">
<div class="container">
    <div class="sixteen columns">
        <h1>services</h1>
    </div>
    <div class="sixteen columns">
        <div class="sub-text-line"></div>
    </div>
    <div class="sixteen columns">
        <div class="sub-text link-svgline mrg">
            Our endeavor is to integrate marketing objectives with the latest <a href="#work" data-gal="m_PageScroll2id" data-ps2id-offset="65">interactive technology platforms<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> to <a href="#work" data-gal="m_PageScroll2id" data-ps2id-offset="65">build a digital experience<svg class="link-svgline"><use xlink:href="#svg_line"></use></svg></a> in the following areas
        </div>
    </div>
    <div class="clear"></div>
</div>
<div class="portfolio-ser"></div>
<div class="expander-wrap-ser relative">
    <div id="expander-wrap-ser">
        <p class="cls-btn"><a class="close-ser" id="hide-ser">X</a></p>
        <div class="expander-inner"></div>
    </div>
</div>
<div class="clear"></div>
<div class="services-icons-wrapper">
    <div class="container">
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="unlock_online_visibility_services.html" title="">
                <div class="icon-services">
                    <img src="images/lock.png"></div>
                <h6>Unlock Online Visibility</h6>
                <p>For us SEO is not about optimising content on webpages. It’s more about optimising for everything on the web</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="OpenUp_online_conversation_services.html" title="">
                <div class="icon-services">
                    <img src="images/callout.png"></div>
                <h6>Open Up Online Conversation</h6>
                <p>We combine the power of social media with marketing to create meaningful online conversations for brands</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="manage_brand_image_online_services.html" title="">
                <div class="icon-services">
                    <img src="images/fengshui.png"></div>
                <h6>Manage Brand Image Online</h6>
                <p>Our Online reputation management helps brands provide online makeovers</p>
            </a>
        </div>
        <div class="clear"></div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="targeted_online_media_campaigns_services.html" title="">
                <div class="icon-services">
                    <img src="images/target.png"></div>
                <h6>Targeted Online Media Campaigns</h6>
                <p>We plan, conceptualize and execute comprehensive
                    <br />
                    online ad campaigns </p>
            </a>

        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="drive_brands_OntoNew_mediums_services.html" title="">
                <div class="icon-services">
                    <img src="images/segway.png"></div>
                <h6>Drive Brands Onto New Mediums</h6>
                <p>We develop social, interactive and mobile and tablet applications to power up the brand in
                    <br />
                    consumer's minds</p>
            </a>
        </div>
        <div class="one-third column services-icon-padding">
            <a class="expander-ser" href="shape_OnlineIdentity_services.html" title="">
                <div class="icon-services">
                    <img src="images/spinner.png"></div>
                <h6>Shape Online Identity</h6>
                <p>Our web site development service provides brands a unique online space. Our services include includes, ideation to execution, we design, promote and host brand’s web requirements</p>
            </a>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>
<section class="parallax-section">
    <div class="clear"></div>
    <div class="parallax-2"></div>
    <div class="just_pattern_parallax"></div>
    <div class="container z-index-pages">
        <div class="sixteen columns" data-scroll-reveal="enter top move 300px over 1s after 0.1s" data-scroll-reveal-id="8" data-scroll-reveal-initialized="true" data-scroll-reveal-complete="true">
        </div>
    </div>
    <div class="clear"></div>
</section>
<div class="clear"></div>

​

我想要不带#标签的URL。请帮帮忙。

Answer 1

如果我没理解错你的问题，你需要使用HTML5推送状态。

类似于(假设你使用的是jQuery --你在文章中给它加了标签)：

    $('a').on('click', function(event) {
        event.preventDefault();

        var title = $(this).attr('href');
        window.history.pushState(“”, title, "/" + title);
        $('html, body').animate({
            scrollTop: $("#" + title).offset().top
        }, 2000);
    });

我添加了一些代码。这样的东西应该可以工作(不需要测试)。它将从点击的锚点获取标题。然后，它会将URL中的标题设置为所单击元素的href，并滚动到id与锚点href中相同的元素。