是否可以从外部URL访问内部jQuery＃链接（直接访问单个网站部分）？

Question

我只有一个页面-自动滚动网站模板，周围散布着不同的div 。

如标题中所述，我可以直接从外部URL访问那些href部分吗？ 例如，输入http://ozzzi.herobo.com/#about ，直接将我带到单页网站的ABOUT部分？

HTML：

<div class="top-nav">
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
        <h3>Menu</h3>
        <a class="scroll" href="#home">Home</a>
        <a class="scroll" href="#features">Features</a>
        <a class="scroll" href="#screenshots">Screen Shots</a>
        <a class="scroll" href="#services">Services</a>
        <a class="scroll" href="#about">About</a>
        <a class="scroll" href="#products">Products</a>
    </nav>
    <div class="main buttonset">    
            <!-- Class "cbp-spmenu-open" gets applied to menu        and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
            <button id="showRightPush"><img src="images/menu.png" alt=""/></button>
            <!--<span class="menu"></span>-->
    </div>

jQuery的：

<div class="top-nav">
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
        <h3>Menu</h3>
        <a class="scroll" href="#home">Home</a>
        <a class="scroll" href="#features">Features</a>
        <a class="scroll" href="#screenshots">Screen Shots</a>
        <a class="scroll" href="#services">Services</a>
        <a class="scroll" href="#about">About</a>
        <a class="scroll" href="#products">Products</a>
    </nav>
    <div class="main buttonset">    
            <!-- Class "cbp-spmenu-open" gets applied to menu    and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
            <button id="showRightPush"><img src="images/menu.png" alt=""/></button>
            <!--<span class="menu"></span>-->
    </div>

</pre>

另一个HTML + jQuery示例：

<pre>  

    <div id="products" class="products wow fadeInUp" data-wow-delay="0.5s">
        <div class="container">
            <div class="products-info">
                <h3>The basic introdution of our Products.</h3>
                <p>Creativity itself doesn't care at all about results - the only thing it craves is the process. 
                Learn to love the process and let whatever happens next happen, 
                without fussing too much about it. </p>
                <img src="images/1.jpg" class="img-responsive zoom-img" alt=" " />
                <div class="link">
                    <a href="sign-up.html" class="hvr-shutter-in-vertical">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</pre>


<script>
    $(document).ready(function () {
        size_li = $("#myList li").size();
        x=1;
        $('#myList li:lt('+x+')').show();
        $('#loadMore').click(function () {
            x= (x+1 <= size_li) ? x+1 : size_li;
            $('#myList li:lt('+x+')').show();
        });
        $('#showLess').click(function () {
            x=(x-1<0) ? 1 : x-1;
            $('#myList li').not(':lt('+x+')').hide();
        });
    });
</script>

我已经向模板添加了一个链接，以查看其来源，以防万一我的解释不够好：[ SOURCE ] [1]

  [1]: http://ozzzi.herobo.com/source

Answer 1

在您的示例中，＃About是一个“书签”链接。 任何浏览器都将尝试滚动到指定页面中id =“ About”的元素。 只需将ID添加到每个部分即可添加书签。 然后，链接可以仅在URL的末尾具有#bookmarkid值。