Question

我是这个网站：Test Site。我正在尝试获取“section.more”的URL，因此我可以连接到http：// ... .es / example / #more之类的URL，然后我会自动加载#more。问题是，如果我尝试用锚点围绕“section.more”，我会得到URL，但是动画会被破坏，我无法通过在浏览器栏中写下它来直接加载到第二部分。

我该怎么做？

代码：

HTML：

<section class="intro">
        CSS style and jQuery scrolling test page
            <a href="#more" id="showmore"></a>
        </section>

        <a href="#more"><section class="more">
            <nav><div id="back">Go Top</div></nav>
            <div id="cont">
                <img alt="" src="" class="left">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta at leo sed viverra. Donec gravida nisi massa, sit amet interdum quam laoreet et. Etiam a lorem lectus. Praesent in cursus urna. Proin sollicitudin eget ante vitae sodales. Aliquam luctus vulputate ipsum, nec gravida odio placerat sed. Nunc at metus scelerisque, consectetur tortor et, facilisis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                <img alt="" src="" class="right">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta at leo sed viverra. Donec gravida nisi massa, sit amet interdum quam laoreet et. Etiam a lorem lectus. Praesent in cursus urna. Proin sollicitudin eget ante vitae sodales. Aliquam luctus vulputate ipsum, nec gravida odio placerat sed. Nunc at metus scelerisque, consectetur tortor et, facilisis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>    
            </div>
        </section></a>

CSS

.more {
background: #3B383B;
position: absolute;
top:100%; left:0; right:0; bottom:0;
display: none;
}

.more nav {
background-color: #f0f0f0;
position: fixed;
top: 0; left: 0; right: 0;
height: 50px;
box-shadow: 0px 0px 5px black;
display: none;
z-index: 99;
}

.more #back {
position: fixed;
top: 51px;
background: transparent;
border-left: 3px solid #2083cc;
border-right: 3px solid #2083cc;
border-bottom: 3px solid #2083cc;
border-radius: 0 0 5px 5px;
width: 150px;
height: 25px;
padding-top: 3px;
text-align: center;
font-family: 'Raleway';
font-weight: 200;
left: 46%;
cursor: pointer;
}

.more #cont {
border: 1px solid #000;
position: inherit;
left: 20%; right: 20%;
top: 50px; bottom: 0;
z-index: 1;
padding: 60px 20px 0 20px;
}

jQuery for animations：

        $("#showmore").on("mouseover", function() {
            $(this).animate({ opacity: 0.5 });
        }).on("mouseout", function() {
            $(this).animate({ opacity: 1 });
        }).on("click", function() {
            $(".more").css("display", "inline").animate({ top: 0 }, 1000, function() {
                $(".more nav").fadeIn( 1000 );
            });
        });

        $(".more #back").on("click", function() {
            $(".more").animate({ top: "100%" }, 1000, function() { $(this).css("display", "none"); });
            $(".more nav").fadeOut( 1000 );
        });

显示带有网址</section>的<section>

0 个答案: