JS控制div跳转到指定的位置的几种解决方案总结

来源：互联网发布：淘宝手机优惠券用编辑：程序博客网时间：2024/06/08 09:13

页面内锚点定位及跳转方法总结

　　这一篇的问题是：点击锚点跳转到相应DIV的问题。

　　最简单的方法是锚点用<a>标签，在href属性中写入DIV的id。如下：

　　　　这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。　

<!DOCTYPE  html><html><head>    <style>        div {            height: 800px;            width: 400px;            border: 2px solid black;        }        h2 {            position: fixed;            margin:50px  500px;        }    </style></head><body>    <h2>        <a href="#div1">to div1</a>        <a href="#div2">to div2</a>        <a href="#div3">to div3</a>    </h2>    <div id="div1">div1</div>    <div id="div2">div2</div>    <div id="div3">div3</div></body></html>

　　第二种方式是在js事件中通过window.location.hash="divId"跳转，但地址也会发生变化，感觉跟第一种方法没区别，甚至更麻烦。

　　第三种方法是用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

<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>

 <script type="text/javascript" src="http://fuck.thinksaas.cn/get/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;  });});

　　注意：　　

　　　　 $("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。

　　　　　另外，脚本可以进一步优化，自己来试试

　　这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

　　　　缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

　　第四种方法是用js的srollIntoView方法，直接用:

document.getElementById("divId").scrollIntoView();

　　这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。

列子：

<!DOCTYPE html><html><head><title>nav测试</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">*{margin:0; padding:0}body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}ul,li{list-style-type: none;}a{text-decoration: none;}.nav{border:1px solid #000;  height:30px;  z-index:9999; position:fixed ; top:0px;_position:absolute;_top:expression(documentElement.scrollTop + "px");}.nav ul li{float:left;font-size: 16px;line-height: 30px;padding:0px 63px;}.nav ul li:hover{background: #23ded3;}#main{height:1000px; border:1px solid #f00;margin-top:30px;}#div1{height:400px;border: 1px solid #ccc;} #div2{height:400px;border: 1px solid #ccc;} #div3{height:400px;border: 1px solid #ccc;}</style></head><body><div id="headr"><div class="nav"><ul><li><a>首页</a></li><li><a onclick="onc()">你好</a></li><li><a>很好</a></li><li><a>他好</a></li><li><a>真的</a></li><li><a>哦哦</a></li></ul></div></div><div id ="main" style="width:960px; height: auto;"><div id="div1"><p>我是ｄｉｖ１的内容</p></div><div id="div2"><p>我是ｄｉｖ2的内容</p></div><div id="div3"><p>我是ｄｉｖ3的内容</p></div></div><div id ="footr"></div></body><script type="text/javascript">var dHeight = document.documentElement.clientHeight;var div1 = document.getElementById("div1");var div2 = document.getElementById("div2");var div3 = document.getElementById("div3");div1.style.height = dHeight - 30 + "px";//通过一个js动态的来确定每个div的高度,还可以通过循环来实现，这里就不加了，各位自己可尝试div2.style.height = dHeight -30 + "px";div3.style.height = dHeight -30 + "px";var li = document.getElementsByTagName("li");li[0].onclick = function(){div1.scrollIntoView(false);  //这里不能给true不然会将会与导航条重叠}li[1].onclick = function(){div2.scrollIntoView(false);}li[2].onclick = function(){div3.scrollIntoView(false);}</script></html>

优化后;

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>   *{margin:0; padding:0}body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}ul,li{list-style-type: none;}a{text-decoration: none;}.nav{border:1px solid #000;  height:30px;  z-index:9999; position:fixed ; top:0px;_position:absolute;_top:expression(documentElement.scrollTop + "px");}.nav li{float:left;font-size: 16px;line-height: 30px;padding:0px 63px;background: #C0C0C0;}.nav li:hover{background: #23ded3;}#main{height:1000px; border:1px solid #f00;margin-top:30px;}</style></head><body> <ul class="nav">    <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 id ="main" style="width:960px; height: auto;">  <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><script type="text/javascript">               document.querySelectorAll('a').forEach(function(el){        el.addEventListener('click', function(){        var dHeight = document.documentElement.clientHeight;        var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )        target.style.height = dHeight - 30 + "px";        target.scrollIntoView(false);    })        })    </script></body></html>

那么如果用jquery来调用该方法的话，需要写成下面这样的：

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

5.如果需要缓慢的移动滚动可添加一个定时器。

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下测试和真机测试，效果都还行，这个需求主要是，没法通过高度来控制完成，因为，我们这个中间的内容元素都是动态加载进来的，高度是变得

因此我通过控制它的index来控制，固定其div模块，距离顶部的高度top为75px,滚动单个的div模块，而不是整个的body一起滚动。

　　推介大家用第四种，我依次试了前三种，都有各种问题（可能是页面较复杂的缘故吧，当然，技术不咋也是。。。）

1 0