Scroll Smoothly

HTML

<ul class="count">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li id="target12">12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li id="target21">21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
</ul>
<a id="returnTop" href="###" onclick="scrollPosition('target21')">
	<span id="returnTop_a"></span>
	<span id="returnTop_b"></span>
</a>

CSS

ul.count li {
    height:50px;
    line-height:30px;
    list-style:none;
    border-bottom:1px solid #f2f2f2
}
#returnTop {
    background-color:#333;
    width:40px;
    height:40px;
    display:block;
    position:fixed;
    line-height:50px;
    color:#fff;
    right:30px;
    bottom:30px;
}
#returnTop_a {
    position: absolute;
    top: -2px;
    left: 8px;
    width: 0;
    height: 0;
    border-width: 10px 12px;
    border-style: dashed dashed solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFF;
    _top: -20px;
}
#returnTop_b {
    position: absolute;
    top: 18px;
    left: 14px;
    width: 12px;
    height: 12px;
    background: #FFF;

JavaScript

function getScrollOffsets(_w) { //get the offset position
    _w = _w || window;
    //for all and IE9+
    if (_w.pageXOffset != null) return {
        x: _w.pageXOffset,
        y: _w.pageYOffset
    };
    //for IE678
    var _d = _w.document;
    if (document.compatMode == "CSS1Compat") return { //for IE678
        x: _d.documentElement.scrollLeft,
        y: _d.documentElement.scrollTop
    };
    //for other mode
    return {
        x: _d.body.scrollLeft,
        y: _d.body.scrpllTop
    };
}

function getViewPortSize(_w) { //get the window size
    _w = _w || window;
    //for all and IE9+
    if (_w.innerWidth != null) return {
        x: _w.innerWidth,
        y: _w.innerHeight
    };
    //for IE678
    var _d = _w.document;
    if (document.compatMode == "CSS1Compat") return { //for IE678
        x: _d.documentElement.clientWidth,
        y: _d.documentElement.clientHeight
    };
    //for other mode
    return {
        x: _d.body.clientWidth,
        y: _d.body.clientHeight
    };

}

function scrollPosition(_obj) {
    var targetX, targetY;
    if (!_obj) {
        targetX = 0;
        targetY = 0;
    } else {
        if (typeof (_obj) == "string") {
            _obj = document.getElementById(_obj);
        } else {
            _obj = _obj
        }
        targetX = _obj.getBoundingClientRect().left + getScrollOffsets().x;
        targetY = _obj.getBoundingClientRect().top + getScrollOffsets().y;
    }
    var maxTargetX = document.body.scrollWidth - getViewPortSize().x;
    if (targetX >= maxTargetX) targetX = maxTargetX;
    if (targetX < 0) targetX = 0;
    var maxTargetY = document.body.scrollHeight - getViewPortSize().y;
    if (targetY >= maxTargetY) targetY = maxTargetY;
    if (targetY < 0) targetY = 0;

    console.log(targetX, targetY)

    //console.log(targetX, targetY);
    var tempTimer = setInterval(function () {
        var currentY = getScrollOffsets().y;
        var currentX = getScrollOffsets().x;

        var tempTargetY =...