流畅地滚动引导页的英雄单元

Question

我正试图在我的网站上实现平滑滚动，但还没能使用任何可用的jquery插件，因为我不太熟悉javascript。在这方面的任何帮助都是有帮助的。相关代码如下：`

<div class="container-fluid" id="navigation">
    <div class="row-fluid">
        <div class="span2 ">
            <div class=" sidebar-nav sidebar-nav-fixed">
                <h4><a href="#about"  class="nav1 transition">About</a></h4>
                <h4><a href="#ourservices"  class="nav2 transition">Our Services</a></h4>
                <h4><a href="#awards"  class="nav3 transition">Awards</a></h4>
            </div>
        </div>

        <div class = "span10" style="margin-top:30px">
            <div class="hero-unit " >                                
                <div id="about" >
                    <h1 >About </h1>                                
                    <hr>
                    <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
                </div>
                <div id="ourservices" >
                    <h1 >Our Services</h1>                                
                    <hr>
                    <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div id="awards" >
                    <h1 >Awards</h1>                                
                    <hr>
                    <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div>
        </div>
    </div>
</div>

我的意图是当用户点击说服务时，在“关于”部分...and上显示。hero-unit滚动到“服务”部分。由于我对javascript不是很熟悉，如果能给出详细的答案将不胜感激。非常感谢。

Answer 1

你可以使用jquery的iscroll插件...Iscroll

我在五月份的移动网站：smooth-scroll中使用过。

go to the year selection page..there是一个流畅的滚动实现。