JS控制div跳轉到指定的位置的解決方案總結

時間 2019-11-30

原文原文鏈接

總結一下本身在寫這個需求遇到的問題，相信你們應該是常常遇到的。即要求滾輪滾動到指定的位置。先看下基本的解決方案。javascript

1.給連接a加個#的方式來實現跳轉。（錨點方法）這裏直接貼下代碼:css

html頁面：html

 <div id="container">
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
 </div>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>

　css樣式：java

 div {
            height: 800px;
            width: 400px;
            border: 2px solid black;
        }
   #container{
            position: fixed;
            margin:50px  500px;
  }

　　該錨點法，不須要任何的js代碼，便可實現跳轉的方法。缺點：點擊連接url發生變化，刷新的話會有問題。此方法貌似只能在.html後綴的頁面才能起做用，對於.cshtml頁面不起做用。jquery

2.用animate屬性，當點擊錨點後，頁面滾動到相應的DIV。接着上面的代碼，具體添加以下代碼：chrome

html頁面：測試

 <div id="container">
           <p id="p1">div1</p>
           <p id="p2">div2</p>
           <p id="p3">div3</p>
 </div>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>

css樣式頁面同上，看下js代碼以下：this

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
$(document).ready(function() {
    $("#p1").click(function() {
        $("html, body").animate({
            scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#p2").click(function() {
        $("html, body").animate({
            scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#p3").click(function() {
        $("html, body").animate({
            scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
});

3.簡單的window.scrollTo方法使用，這裏再也不詳細說，看下用法。url

即滾動到座標爲(100,500)的地方。比較單一，且沒有緩慢的效果spa

function scrollWindow(){ 
    window.scrollTo(100,500); 
}

4.用js的srollIntoView方法進行使用。這裏貼下代碼：

html頁面：

 <ul>
        <li><a href="javascript:;" data-tab="eat">吃飯</a></li>
        <li><a href="javascript:;" data-tab="sleep">睡覺</a></li>
        <li><a href="javascript:;" data-tab="walk">逛街</a></li>
 </ul>
<div >
    <div data-tab="eat" style="background:cyan; height:500px;">
        吃飯
    </div>
    <div data-tab="sleep" style="background:lightgreen;height:2000px;">
        睡覺
    </div>
    <div data-tab="walk" style="background:LightSalmon;height:1000px;">
        逛街
    </div>
</div>

js代碼以下：

 [].slice.call(document.querySelectorAll('a')).forEach(function(el){
            el.addEventListener('click', function(){
                var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
                target.scrollIntoView(true);
            })
  })

注意一個問題，object.scrollIntoView(bool),前面是對象，一般原生的獲取對象都是下面的寫法：

document.getElementById('#xxx' ).scrollIntoView(true);

那麼若是用jquery來調用該方法的話，須要寫成下面這樣的：

$('#xxx')[0].scrollIntoView(true);

5.若是須要緩慢的移動滾動可添加一個定時器。看下咱們這個需求。先貼下代碼：

js部分：

    return cPageView.extend({
            pageid: 10320608681,
            hpageid: 10320608681,
            events: {
                "click .nav_list li ": "setHightLight",
            },
})

點擊事件部分：

  //設置標籤選中，而且滾動到相應的位置
            setHightLight: function (e) {
                var obj = $(e.currentTarget);
                var _tag = this.$el.find('.nav_list li');
                var $innerText = this.$el.find('.fsp_hd');
                var items = $(".fs_prd_wrap").find('.item');
                this.$el.find('.nav_list li').removeClass('current');
                var itemIndex = "";
                var objCurrent = [];
                obj.addClass('current');
                var scrollMove = function (scrollTo, time) {
                    var scrollFrom = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                    var count = 0;
                    var every = 10;
                    scrollTo = parseInt(scrollTo);
                    time /= every;

                    var interval = setInterval(function () {
                        count++;
                        document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollFrom;
                        if (count >= time) {
                            clearInterval(interval);
                        }
                    }, every);
                };
                for (var i = 0; i < items.length; i++) {
                    var self = this;
                    items[i].index = i;
                    if (obj.index() == items[i].index) {
                        items.each(function () {
                            var currentItem = $(this);
                            // items[i].scrollIntoView(false);          
                            scrollMove(items[i].offsetTop-75, 500);
                        });
                       
                       // console.log(items[i].index);
                    }
                }
            },

　看下效果以下所示：