快捷導(dǎo)航

JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)

更新時(shí)間：2016年11月05日 16:24:17 作者：婷風(fēng)

這篇文章主要介紹了JS控制div跳轉(zhuǎn)到指定的位置的幾種解決方案總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。

總結(jié)一下自己在寫這個(gè)需求遇到的問題，相信大家應(yīng)該是經(jīng)常遇到的。即要求滾輪滾動(dòng)到指定的位置。先看下基本的解決方案。

1.給鏈接a加個(gè)#的方式來實(shí)現(xiàn)跳轉(zhuǎn)。（錨點(diǎn)方法）這里直接貼下代碼:

<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樣式：

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

該錨點(diǎn)法，不需要任何的js代碼，即可實(shí)現(xiàn)跳轉(zhuǎn)的方法。缺點(diǎn)：點(diǎn)擊鏈接url發(fā)生變化，刷新的話會(huì)有問題。此方法貌似只能在.html后綴的頁面才能起作用，對(duì)于.cshtml頁面不起作用。

2.用animate屬性，當(dāng)點(diǎn)擊錨點(diǎn)后，頁面滾動(dòng)到相應(yīng)的DIV。接著上面的代碼，具體添加如下代碼：

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代碼如下：

 <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方法使用，這里不再詳細(xì)說，看下用法。

即滾動(dòng)到坐標(biāo)為(100,500)的地方。比較單一，且沒有緩慢的效果

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

4.用js的srollIntoView方法進(jìn)行使用。這里貼下代碼：

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

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

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

那么如果用jquery來調(diào)用該方法的話，需要寫成下面這樣的：

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

5.如果需要緩慢的移動(dòng)滾動(dòng)可添加一個(gè)定時(shí)器?？聪挛覀冞@個(gè)需求。先貼下代碼：

js部分：

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

點(diǎn)擊事件部分：

//設(shè)置標(biāo)簽選中，并且滾動(dòng)到相應(yīng)的位置
     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);
         }
       }
     },

看下效果如下所示：

在chrome下測(cè)試和真機(jī)測(cè)試，效果都還行，這個(gè)需求主要是，沒法通過高度來控制完成，因?yàn)?，我們這個(gè)中間的內(nèi)容元素都是動(dòng)態(tài)加載進(jìn)來的，高度是變得