JavaScript 滚动页面到指定元素位置

本文主要是做点击，滚动，吊顶的效果；

如图：

代码如下：

    var $doc = document;
    var $My = {
        $bar: $doc.querySelector('.uzai-netsix-bar'),
        $contScoll: $doc.getElementsByClassName('conts-scroll'),
        $products: $doc.getElementsByClassName('uzai-product-six')[0],
        $activity: $doc.getElementsByClassName('netsix-activity')[0],
        $bgFixed: $doc.getElementsByClassName('netsix-fixed')[0],
        $actBtn: $doc.querySelector('.netsix-activity .close')
    }
    var $barBaby = $My.$bar.getElementsByTagName('b'),
        $barHeight = $My.$bar.offsetHeight,
        $rule = $doc.querySelector('.uzai-netsix-love .rule'),
        $getgift = $doc.getElementsByClassName('lingqu')[0];

点击定位：

    // 处理导航点击
    for (var i = 0, len = $barBaby.length; i < len; i++) {
        (function(i) {
            $barBaby[i].onclick = function() {
                for (var j = 0, lens = $barBaby.length; j < lens; j++) {
                    $barBaby[j].classList.remove('selected');
                }
                this.classList.add('selected');
                $doc.body.scrollTop = $My.$contScoll[i].offsetTop - $barHeight
            };
      

滚动定位：

        var _top,
            $barOffsetTop = $My.$bar.offsetTop;
        window.onscroll = function() {
            if ($barOffsetTop > document.body.scrollTop) {
                $My.$bar.classList.remove('active');
                $My.$products.classList.remove('active');
            } else {
                $My.$bar.classList.add('active');
                $My.$products.classList.add('active');
            }
            var _num = 0;
            for (var i = 0, len = $barBaby.length; i < len; i++) {
                (function(i) {
                    _top = document.body.scrollTop;
                    if (_top >= $My.$contScoll[i].offsetTop - $barHeight) {
                        _num = i;
                    }
                })(i);
            }
            fixCurClass(_num);
        };
    function fixCurClass(index) {
        for (var i = 0, len = $barBaby.length; i < len; i++) {
            (function(i) {
                for (var j = 0, lens = $barBaby.length; j < lens; j++) {
                    $barBaby[j].classList.remove('selected');
                }
                $barBaby[index].classList.add('selected');
            })(i);
        }
    }