Click a top then smoothly up

by lozenlin

HTML

<div id="top">
請往下捲...<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
下<br />
O<br />
O<br />
O<br />
O<br />
O<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO再往下捲...<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOOOOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOOOOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
O<br />
O<br />
O<br />
O<br />
O<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br />
OOOOO<br...

CSS

.top
{
    display: inline-block;
    margin: 5px;
    padding: 10px;
    width: 100px;
    background-color: rgb(200, 0, 0);
    color:white;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
}

.top:hover
{
    background-color: rgb(230,0,0)
}

JavaScript

function smoothUp() {
    $("html, body").animate({
        scrollTop: $("#top").offset().top
    }, 500);
}