滚动当前div的顶部

时间:2018-11-13 17:29:40

标签: javascript jquery html arrays

 _bindShowLess = function () {
            var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');

            _showLess.on('click', function () {

                var sliders = [].slice.call(document.getElementsByClassName("sectorpage-strengths"));

                var indices = [];

                sliders.forEach(function (element, index){
                    indices.append("array" +index + "!");
                });
                console.table('Array indices!', indices);

                $('html, body').animate({
                    scrollTop: _sectorPageStrengths.offset().top
                }, 700);
            });
        };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
        <div class="container">
                <div class="row">
                    <div class="col-xs-12">
                        <h2>
                            Commercial Services
                        </h2>
                    </div>
                </div>
            <div class="row sectorpage-strengths-list">
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Datamonitor Healthcare </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Biomedtracker </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=254&amp;la=en-US&amp;hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Medtrack </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
                        <div class="sectorpage-strengths-list-item">
                            <div class="main-container" style="height: 0px;">

<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&amp;w=350&amp;la=en-US&amp;hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" ">                                                                        <div class="yellow-container" style="height: 80px;">
                                            <h3>Strategic Transactions </h3>
                                        </div>

                            </div>
                            <div class="wrap">
                                <div class="text-description" style="height: 145px;">
                                    <span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
                                </div>
                                                                    <div class="slant"></div>
                                    </div>
                        </div>
                    </div>
            </div>


                <div class="row view-all-sectors-btn-container">
                    <span class="center-block view-all-sectors-btn text-center more" role="button">
                        View more
                        <br>
                        <em class="informa-icon glyphicon glyphicon-plus-sign"></em>
                    </span>
                    <span class="center-block view-all-sectors-btn text-center less" role="button">
                        View Less
                        <br>
                        <em class="informa-icon glyphicon glyphicon-minus-sign"></em>
                    </span>
                </div>
        </div>
    </section>

我有一个div数组和一个函数,用于关闭div中的扩展部分。

我还可以通过函数中的动作侦听器事件来识别我所在或单击的div(数组对象)。

我试图在单击(关闭)时滚动到当前部分的顶部。

但是,当我尝试滚动到告诉我当前数组索引的var顶部时,出现以下错误。

  

TypeError:n.offset不是函数

有人知道如何更改我的代码以使单击(关闭)滚动到当前div索引的顶部吗?

我的JavaScript

 _bindShowLess = function () {
        var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');

        _showLess.on('click', function () {

            var sliders = [].slice.call(document.getElementsByClassName("sectorpage-strengths"));

            sliders.forEach(function (element, index){
                element.addEventListener("click", function(){
                    console.log("array" +index + "!");
                });
            });

            $('html, body').stop().animate({
                scrollTop: sliders.offset().top
            }, 700);

            // $('html, body').animate({
            //     scrollTop: _sectorPageStrengths.offset().top
            // }, 700);
        });
    };

0 个答案:

没有答案