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

总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。

1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码：

div id=' container ' a href=' # div 1 ' div 1/a href=' # div 2 ' div 2/a href=' # div 3 ' div 3/a/div id=' div 1 ' div 1/div id=' div 2 ' div 2/div id=' div 3 ' div 3/div CSS样式：

div { height: 800px宽度： 400像素；border: 2px纯黑；} #容器{位置：固定；margin:50px 500px}该锚点法，不需要任何的射流研究…代码，即可实现跳转的方法。缺点：点击链接全球资源定位器(统一资源定位符)发生变化，刷新的话会有问题。此方法貌似只能在。超文本标记语言后缀的页面才能起作用，对于cshtml .页面不起作用。

2.用有生命的属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

超文本标记语言页面：

div id='容器' p id=' P1 ' div 1/p p id=' p2 ' div 2/p p id=' P3 ' div 3/p/div id=' div 1 ' div 1/div id=' div 2 ' div 2/div id=' div 3 ' div 3/div CSS样式页面同上，看下射流研究…代码如下：

脚本类型=' text/JavaScript ' src=' http :http://代码。jquery。com/jquery-1。8 .0 .量滴js '/script $(文档)。ready(function() { $('#p1 ')).单击(function() { $('html，body ').动画({ scrollTop: $('#div1 ')).偏移量()。top }、{duration: 500，eas : ' swing ' })；返回false })；$('#p2 ').单击(function() { $('html，body ').制作动画({ scrollTop: $('#div2 ')).偏移量()。top }、{duration: 500，eas : ' swing ' })；返回false })；$('#p3 ').单击(function() { $('html，body ').动画({ scrollTop: $('#div3 ')).偏移量()。top }、{duration: 500，eas : ' swing ' })；返回false })；});3.简单的window.scrollTo方法使用，这里不再详细说，看下用法。

即滚动到坐标为(100,500)的地方。比较单一，且没有缓慢的效果

函数滚动窗口(){ window。滚动至(100，500)；}4.用射流研究…的srollIntoView方法进行使用。这里贴下代码：

超文本标记语言页面：

ul lia href=' JavaScript : ' data-tab=' eat '吃饭/a/Li lia href=' JavaScript :'数据-标签="睡眠"睡觉/a/Li lia href=' JavaScript :'data-tab='walk '逛街/a/Li/uldiv div data-tab=' eat ' style=' background :青色；'高度：500像素吃饭/div div data-tab=' sleep ' style=' background :浅绿色；高度：2000像素睡觉/div div data-tab=' walk ' style=' background : light salmon；'高度：1000像素逛街/div/divjs代码如下：

[].切片。调用(文档。queryselectorall(' a ').函数。addeventlistener(' click ')，function(){ var target=document。query selector(' div[data-tab=' this。getattribute(' data-tab ')')]')目标。scrollintoview(true)；}) })注意一个问题，object.scrollIntoView(bool)，前面是对象，通常原生的获取对象都是下面的写法：

document.getElementById('#xxx ').scrollIntoView(true)；那么如果用jquery来调用该方法的话，需要写成下面这样的：

$('#xxx')[0].scrollIntoView(true)；5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码：

射流研究…部分：

返回CPageView。扩展({页面id : 10320608681，hpageid: 10320608681，events: { '单击.nav_list li ': 'setHightLight '，}，})点击事件部分：

//设置标签选中，并且滚动到相应的位置setHightLight:函数(e){ var obj=$(e . current target)；var _tag=这个.$el.find(' .nav _ list Li’)；var $innerText=this .$el.find(' .FSP _高清’)；var items=$(' .fs _ prd _ wrap’).查找('。项目');这个$el.find ' .导航列表李').removeClass(“”当前');var ItemIndex=var Objccurrent=[]；物体。add CLaSS(' current ')；var scroll move=函数(滚动到，时间){ var scroll from=window。pageyoffset | |文档。文档元素。向上滚动| |文档。尸体。滚动顶部；定义变量计数=0;定义变量每=10;滚动到=parseInt(滚动到)；time/=every；var interval=setInterval(function(){ count；文件。文档元素。向上滚动=文档。尸体。滚动顶部=(滚动至-滚动自)/时间*计数滚动自；if(计数=时间){ clearInterval(间隔);} },每一个);};for(var I=0；一。项目。长度；I){ var self=this；项目[i].索引=我；if (obj.index()==items[i].索引){ items。每个(function(){ var currentItem=$(this)；//项目[i].scrollIntoView(false)；滚动移动（项目[i]).offsetTop-75，500)；});//console.log(items[i]).索引);} } },看下效果如下所示

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

因此我通过控制它的指数来控制，固定其差异模块，距离顶部的高度顶端为75px，滚动单个的差异模块，而不是整个的身体一起滚动。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。