JS控制div跳转到指定的位置的几种解决方案总结
转载 & & 作者：婷风
这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。
总结一下自己在写这个需求遇到的问题，相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。
1.给链接a加个#的方式来实现跳转。（锚点方法）这里直接贴下代码:
&div id="container"&
&a href="#div1"&div1&/a&
&a href="#div2"&div2&/a&
&a href="#div3"&div3&/a&
&div id="div1"&div1&/div&
&div id="div2"&div2&/div&
&div id="div3"&div3&/div&
height: 800
width: 400
#container{
margin:50px 500
该锚点法，不需要任何的js代码，即可实现跳转的方法。缺点：点击链接url发生变化，刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用，对于.cshtml页面不起作用。
2.用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：
html页面：
&div id="container"&
&p id="p1"&div1&/p&
&p id="p2"&div2&/p&
&p id="p3"&div3&/p&
&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"});
$("#p2").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
$("#p3").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
3.简单的window.scrollTo方法使用，这里不再详细说，看下用法。
即滚动到坐标为(100,500)的地方。比较单一，且没有缓慢的效果
function scrollWindow(){
window.scrollTo(100,500);
4.用js的srollIntoView方法进行使用。这里贴下代码：
html页面：
&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&
&div data-tab="eat" style="background: height:500"&
&div data-tab="sleep" style="background:height:2000"&
&div data-tab="walk" style="background:LightSheight:1000"&
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.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码：
return cPageView.extend({
hpageid: ,
"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.scrollT
var count = 0;
var every = 10;
scrollTo = parseInt(scrollTo);
var interval = setInterval(function () {
document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollF
if (count &= time) {
clearInterval(interval);
}, every);
for (var i = 0; i & items. i++) {
var self =
items[i].index =
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一起滚动。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具博客分类：
昨天一个朋友问我如何在页面加载完成后，自动将页面定位到某个位置，当时有些忙，就没来得及解决。殊不知今天在做PHP教程的项目中也有了同样的需求：为了页面美观，需要只显示用户从楼盘相册点击后进入的相册幻灯页面的楼盘信息（也就是自动定位到了楼盘的相关信息，忽略了顶部banner）。如下图所示：
使用Javascript自动将页面滚动到指定位置
下面我们就来讲解一下如何使用Javascript自动将页面滚动到指定位置。
指定需要滚动的位置
这一步很简单，就是需要给滚动到指定位置的元素加上id属性，如下：
天一广场
使用Javascript自动将页面滚动到指定位置
脚本如下：
这就完成了我们的需求，经测试兼容所有主流浏览器。
我也查阅了网上的一些资料，有的朋友说还有如下方式实现：
我也对上面的方法进行了测试，发现使用javascript中的window.scrollBy()存在一个问题：每刷新一次页面，滚动距离顶部的高度都会比上次递增我们定义的scroll_y值。
所以还是建议大家使用window.location.hash方法来自动将页面滚动到指定位置。
&script type=”text/javascript”& $(function(){ window.location.hash = "#title"; }) &/script&
window.location 对象属性介绍：
Location 对象属性
属性　　　　　 　　　　描述　　　　 IE F O
hash 设置或返回从井号 (#) 开始的 URL（锚）。 4 1 9
host 设置或返回主机名和当前 URL 的端口号。 4 1 9
hostname 设置或返回当前 URL 的主机名。 4 1 9
href 设置或返回完整的 URL。 4 1 9
pathname 设置或返回当前 URL 的路径部分。 4 1 9
port 设置或返回当前 URL 的端口号。 4 1 9
protocol 设置或返回当前 URL 的协议。 4 1 9
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 4 1 9
Location 对象方法
属性 描述 IE F O
assign() 加载新的文档。 4 1 9
reload() 重新加载当前文档。 4 1 9
replace() 用新的文档替换当前文档。 4 1 9
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象属性
属性 描述 IE F O
length 返回浏览器历史列表中的 URL 数量。 4 1 9
History 对象方法
方法 描述 IE F O
back() 加载 history 列表中的前一个 URL。 4 1 9
forward() 加载 history 列表中的下一个 URL。 4 1 9
go() 加载 history 列表中的某个具体页面。 4 1 9
History 对象描述
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。
浏览 47291
浏览: 47974 次
来自: 西安
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如SF问答页面，滚动到最低端，点击红色部分的问题，跳转进入了一个新页面，当我在新页面点击后退时又回到问答页面，但仍保持在页面的最低端，这是怎么定位的？问答页面的url一直没变……
这个问题已被隐藏，原因：
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个定位是浏览器自带的，前进后退的时候浏览器会滚动到刚才所在的位置。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你说的是锚点吗？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)2958人阅读
　　这一篇的问题是：点击锚点跳转到相应DIV的问题。
　　最简单的方法是锚点用&a&标签，在href属性中写入DIV的id。如下：
　　　　这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。　
height: 800
width: 400
margin:50px
&a href="#div1"&to div1&/a&
&a href="#div2"&to div2&/a&
&a href="#div3"&to div3&/a&
&div id="div1"&div1&/div&
&div id="div2"&div2&/div&
&div id="div3"&div3&/div&
　　第二种方式是在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 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"});
$("#p2").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
$("#p3").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
　　注意：　　
　　　　 $("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。
　　　　　另外，脚本可以进一步优化，自己来试试
　　这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。
缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。
　　第四种方法是用js的srollIntoView方法，直接用:document.getElementById("divId").scrollIntoView();
　　这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。
&!DOCTYPE html&
&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:960 height:2000 margin:0 border: 1px dotted #432432;}
ul,li{list-style-type:}
a{text-decoration:}
.nav{border:1px solid #000;
z-index:9999;
_position:
_top:expression(documentElement.scrollTop + "px");
.nav ul li{
font-size: 16
line-height: 30
padding:0px 63
.nav ul li:hover{
background: #23ded3;
height:1000
border:1px solid #f00;
margin-top:30
height:400
border: 1px solid #
height:400
border: 1px solid #
height:400
border: 1px solid #
&div id="headr"&
&div class="nav"&
&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&
&div id ="main" style="width:960 height:"&
&div id="div1"&
&p&我是ｄｉｖ１的内容&/p&
&div id="div2"&
&p&我是ｄｉｖ2的内容&/p&
&div id="div3"&
&p&我是ｄｉｖ3的内容&/p&
&div id ="footr"&&/div&
&script type="text/javascript"&
var dHeight = document.documentElement.clientH
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);
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&&/title&
*{margin:0; padding:0}
body{width:960 height:2000 margin:0 border: 1px dotted #432432;}
ul,li{list-style-type:}
a{text-decoration:}
.nav{border:1px solid #000;
z-index:9999;
_position:
_top:expression(documentElement.scrollTop + "px");
font-size: 16
line-height: 30
padding:0px 63
background: #C0C0C0;
.nav li:hover{
background: #23ded3;
height:1000
border:1px solid #f00;
margin-top:30
&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&
&div id ="main" style="width:960 height:"&
&div data-tab="eat" style="background: height:500"&
&div data-tab="sleep" style="background:height:2000"&
&div data-tab="walk" style="background:LightSheight:1000"&
&script type="text/javascript"&
document.querySelectorAll('a').forEach(function(el){
el.addEventListener('click', function(){
var dHeight = document.documentElement.clientH
var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )
target.style.height = dHeight - 30 + "px";
target.scrollIntoView(false);
那么如果用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.scrollT
var count = 0;
var every = 10;
scrollTo = parseInt(scrollTo);
var interval = setInterval(function () {
document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollF
if (count &= time) {
clearInterval(interval);
}, every);
for (var i = 0; i & items. i++) {
var self =
items[i].index =
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一起滚动。
　　推介大家用第四种，我依次试了前三种，都有各种问题（可能是页面较复杂的缘故吧，当然，技术不咋也是。。。）