Edit in JSFiddle

<!-- 定义TOP锚点 -->
<div id="top"></div>
<div>
    
<h3>定义锚点</h3>

    <ul>
        <li>使用id属性定义
            <!-- HTML generated using hilite.me -->
            <div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000; font-weight: bold">&lt;div</span> <span style="color: #7D9029">id=</span><span style="color: #BA2121">&quot;top&quot;</span><span style="color: #008000; font-weight: bold">&gt;&lt;/div&gt;</span>
</pre>
            </div>
        </li>
        <li>使用name属性定义
            <!-- HTML generated using hilite.me -->
            <div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000; font-weight: bold">&lt;a</span> <span style="color: #7D9029">name=</span><span style="color: #BA2121">&quot;top&quot;</span><span style="color: #008000; font-weight: bold">&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;</span>
</pre>
            </div>
        </li>
        <li>直接使用body的id属性
            <!-- HTML generated using hilite.me -->
            <div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #008000; font-weight: bold">&lt;body</span> <span style="color: #7D9029">id=</span><span style="color: #BA2121">&quot;top&quot;</span><span style="color: #008000; font-weight: bold">&gt;</span>...<span style="color: #008000; font-weight: bold">&lt;/body&gt;</span>
</pre>
            </div>
        </li>
    </ul>
</div>
<div class="container">
    <div class="content">
        
<h3>Part 1</h3>
It wasn't long ago when we smiled to ourselves at the reports of Russians and Chinese buying up blue jeans and dancing to rock music. Somehow we knew that this meant we were winning. No doubt our confidence was justified -- and all the more as we penetrate our "enemies" by means of commercial television, cinema, and, finally, the fully integrated logic and the virtually real images of a brave new world. And yet, we are only now beginning to sense, with a restless foreboding, the slowly emergent effects of these images upon our own culture. What if it turns out that "winning" is the worst possible outcome?
        
<h3>Part 2</h3>
The obvious lie should already have alerted us to the dangers. A culture that has largely succeeded in eradicating the last traces of its own village life turns around and -- by appealing to a yet further extension of the eradicating technology -- encourages itself with Edenic images of a global village. This is Doublespeak. The television, having helped to barricade the villager behind the walls of his own home, will not now convert the world into a village simply by enabling him to watch the bombs as they rain upon Baghdad. Nor will we suddenly be delivered from ourselves by making the television interactive and investing it with computing power. (Interactivity allows, among other things, the hand to guide the bomb to its target.) In none of this do we see a healing of the terms of human exchange. Nor do we see evidence of escape from the inexorable, despotic logic already responsible for the fortification and isolation of our own inner-city "villages."
        
<h3>Part 3</h3>
It wasn't long ago when we smiled to ourselves at the reports of Russians and Chinese buying up blue jeans and dancing to rock music. Somehow we knew that this meant we were winning. No doubt our confidence was justified -- and all the more as we penetrate our "enemies" by means of commercial television, cinema, and, finally, the fully integrated logic and the virtually real images of a brave new world. And yet, we are only now beginning to sense, with a restless foreboding, the slowly emergent effects of these images upon our own culture. What if it turns out that "winning" is the worst possible outcome?
        
<h3>Part 4</h3>
The obvious lie should already have alerted us to the dangers. A culture that has largely succeeded in eradicating the last traces of its own village life turns around and -- by appealing to a yet further extension of the eradicating technology -- encourages itself with Edenic images of a global village. This is Doublespeak. The television, having helped to barricade the villager behind the walls of his own home, will not now convert the world into a village simply by enabling him to watch the bombs as they rain upon Baghdad. Nor will we suddenly be delivered from ourselves by making the television interactive and investing it with computing power. (Interactivity allows, among other things, the hand to guide the bomb to its target.) In none of this do we see a healing of the terms of human exchange. Nor do we see evidence of escape from the inexorable, despotic logic already responsible for the fortification and isolation of our own inner-city "villages."</div>
    <div class="gotopbtn"><a href="#top">回到顶端</a>
    </div>
</div>
.container {
    width:100%;
    margin:0 auto;
    height:auto;
    min-height:100%;
    position:relative;
}
.content {
    padding: 10px;
    margin: 20px;
    0px;
    border: 2px solid #777777;
}
.gotopbtn {
    position: fixed;
    bottom: 40px;
    right: 10px;
    background: #333333;
}
.gotopbtn a {
    color: #FFF;
    text-decoration: none;
}