网页内容太多时会导致整个页面太长，如果需要查看页面底部内容需要把页面往下拉很长距离，这时往往需要有一个直达底部的功能，这里使用两种方法实现，其中第一种不不要js就能实现。

方法一（纯html）、

1、在页面底部创建一个超链接，name属性设置为dibu。

2、在顶部创建一个超链接，超链接href指向#dibu。

完整代码：

<a href="#dibu">滚动到底部</a>

<div id="box">

    顶部内容<br/>


    一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>
    底部内容<br/>
</div>

<a name="dibu"></a><!--底部标记-->

方法二（html+js）、

完整代码

<a href="javascript:tobottom();">滚动到底部</a>

<div id="box">

    顶部内容<br/>

    一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>一行内容<br/>
    底部内容<br/>
</div>

<a name="dibu"></a><!--底部标记-->


<script>
    //滚动到底部
    function tobottom() {
        window.scrollTo(0,2000)
    }
    //滚动到顶部
    function totop(){
        window.scrollTo(0,0)
    }
</script>

示例图：