这种简单的小功能思路很清晰，就是检测滚动条是不是在顶部，不是的话就显示返回顶部按钮，是的话就把它隐藏。

滚动条监测在新版的主流浏览器中是这样实现的：

document.body.scrollTop

如果想要兼容IE，那么可以加入下面这句完成：

document.documentElement.scrollTop

上面就是最主要的代码了，但是想要实现实时的监测滚动条的位置，我们还需要一个window.onscroll才能完成，这样不断下拉会不断刷新滚动条的位置。

说道这里，你大概已经可以试着写出返回顶部这个功能了。

贴出我的代码吧：

HETM

<a class="back2top" style="display:none;"></a>

CSS

.back2top {z-index:99;background:#000;width:36px;height:36px;display:block;position:fixed;right:20px;bottom:20px;cursor:pointer;border-radius:2px;opacity:.6;}
.back2top:before {content:"";position:absolute;right:8px;top:10px;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:15px solid #fff;}

JavaScript

window.onscroll=function(){
    var goTop = document.getElementsByClassName("back2top");
    if(goTop.length>0){
        goTop[0].style.display = document.documentElement.scrollTop >= 200 || document.body.scrollTop >= 200 ? 'block':'none';
        goTop[0].onclick=function(){
            document.body.scrollTop=0;
            document.documentElement.scrollTop=0;
        }
    }
}

getElementsByClassName可能不兼容IE8，如果想向下兼容，可以尝试用getElementById就可以了。

jQuery的Dom操作十分简单，在开发iDevs主题的时候，其中“菜单”和“搜索”部分使用到了一些很基本的Dom操作，图方便，我使用了jQuery，闲来无事，尝试着使用原生的js完成这一操作，发现其代码量一样，且原生js效率更高，啰嗦多了，先贴代码。

HTML结构如下：

<input type="button" id="Test" class="menu_click" value="按钮" />

jQuery的Dom实例：

jQuery_btn_click("Test", "menu_click", "menu_close", true);
function jQuery_btn_click(btn, on, off, flag) {
    $('#' + menu).click(function () {
        $('#' + menu).prop('class', (flag = !flag) ? on : off);
    });
}

为了方便，我封装了函数并传了几个有趣的参数，代码量很少，具体传的什么一看便知。

原生Javascript实例：

cover_click("Test", "menu_click", "menu_close", true);
function cover_click(btn, on, off, flag) {
    (btn = document.getElementById(btn)).onclick = function () {
        btn.setAttribute("class", (flag = !flag) ? on : off);
    }
}

就是这样子，原生的方法操作起来与jQuery的代码量几乎一致。

兼容性

兼容性方面，jQuery视版本而定，2.0版本之后已经不再支持IE8-，原生的，我本地测试是支持IE7+，欢迎大家测试一下。

上面只是一个实例，在此记录一下，修修改改还可以完成其他的一些简单的Dom操作，如果有更方便且简单的方法欢迎指出。