Question

我认为标题说得够多了。所以现在有的是，当我点击“例4”时，它将页面滚动到例子4的h1。但它太丑了，当我点击它时，它只是BOOM就在那里。我想让它顺利滚动，这可以用html / css完成，还是需要jQuery / JS或其他东西？这是我现在所拥有的一个简单例子。

<html>
<body>
    <ul>
        <li><a href="http://www.----.com/#ex1">Example 1</a></li>
        <li><a href="http://www.----.com/#ex2">Example 2</a></li>
        <li><a href="http://www.----.com/#ex3">Example 3</a></li>
        <li><a href="http://www.----.com/#ex4">Example 4</a></li>
        <li><a href="http://www.----.com/#ex5">Example 5</a></li>
    </ul>


    <h1 id="ex1">Example 1</h1>
        <p>"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>
        <br />

    <h1 id="ex2">Example 2</h1>
        <p>"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>
        <br />

    <h1 id="ex3">Example 3</h1>
        <p>"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>
        <br />

    <h1 id="ex4">Example 4</h1>
        <p>"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>
        <br />

    <h1 id="ex5">Example 5</h1>
        <p>"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>
        <br />

</body>

编辑： Here顺便提一下我的网站链接; 3.

Answer 1

只需像这样改变你的href链接..它应该可以工作

<ul>
        <li><a href="#ex1">Example 1</a></li>
        <li><a href="#ex2">Example 2</a></li>
        <li><a href="#ex3">Example 3</a></li>
        <li><a href="#ex4">Example 4</a></li>
        <li><a href="#ex5">Example 5</a></li>
    </ul>

单击导航到页面其他部分的链接时滑动动画

1 个答案: