是否可以从外部URL访问内部jQuery#链接(直接访问单个网站部分)?

时间:2015-08-30 08:06:34

标签: javascript jquery html seo

我有一个页面 - 自动滚动网站模板,其中散布着不同的div

如标题所述,我可以直接从外部网址访问这些href部分吗?例如,输入http://ozzzi.herobo.com/#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

1 个答案:

答案 0 :(得分:0)

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