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);
        }
    }







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值