JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm
这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。
1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码:
1
2
3
4
5
6
7
8
|
< 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样式:
1
2
3
4
5
6
7
8
9
|
div { height : 800px ; width : 400px ; border : 2px solid black ; } #container{ position : fixed ; margin : 50px 500px ; } |
该锚点法,不需要任何的js代码,即可实现跳转的方法。缺点:点击链接url发生变化,刷新的话会有问题。此方法貌似只能在.html后缀的页面才能起作用,对于.cshtml页面不起作用。
2.用animate属性,当点击锚点后,页面滚动到相应的DIV。接着上面的代码,具体添加如下代码:
html页面:
1
2
3
4
5
6
7
8
|
< 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代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(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方法使用,这里不再详细说,看下用法。
即滚动到坐标为(100,500)的地方。比较单一,且没有缓慢的效果
1
2
3
|
function scrollWindow(){ window.scrollTo(100,500); } |
4.用js的srollIntoView方法进行使用。这里贴下代码:
html页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< 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代码如下:
1
2
3
4
5
6
|
[].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),前面是对象,通常原生的获取对象都是下面的写法:
1
|
document.getElementById( '#xxx' ).scrollIntoView( true ); |
那么如果用jquery来调用该方法的话,需要写成下面这样的:
1
|
$( '#xxx' )[0].scrollIntoView( true ); |
5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码:
js部分:
1
2
3
4
5
6
7
|
return cPageView.extend({ pageid: 10320608681, hpageid: 10320608681, events: { "click .nav_list li " : "setHightLight" , }, }) |
点击事件部分:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
//设置标签选中,并且滚动到相应的位置 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一起滚动。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
JS控制div跳转到指定的位置的几种解决方案总结的更多相关文章
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- React-Router JS控制路由跳转
React-Router JS控制路由跳转 时间: 2016-04-12 15:01:20 作者: zhongxia React-Router 控制路由跳转的方式,目前知道的有两种[Link 链接, ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
随机推荐
- ASP.NET开发,且编且改,分清职责
本篇Insus.NET使用一个实例,分享在ASP.NET开发时,一个功能一个方法(函数),且编且改,一步一个脚印把实例完成.在方法多变多形式的情况之下,怎样把写出来程序简单明了. 下面是一个Excel ...
- Java面试题精选
jdk ┌──────────────┬───────────────────────────────────────────────────────┐ │ │ │ ├──────────────┼─ ...
- PetaPoco源代码学习--3.Sql类
PetaPoco对数据库的操作直接使用SQL语句,在代码中进行调用既可以直接传递SQL语句,也可以使用提供的SQL类来获取到SQL语句进行操作,直接传递SQL语句在内部实现中也是封装成Sql类传递到底 ...
- 学习Memcached:1基本配置与安装
今天把刚刚学习的到memcached写在博客里,以免以后自己遗忘. 1.首先下载Memcached数据库服务文件,这是我下载好的这个memcached文件. 2.接下来就启动这个exe.通常我需要讲这 ...
- LinkedBlockQueue生产消费源码解析
LinkedBlockQueue自JDK1.5以后提供的一种阻塞队列,遵循生产者消费者模式,实现了BlockQueue接口,如图 从它的名字可以了解到它是采用链表的方式实现了阻塞队列,并且定义了“节点 ...
- 纯HTML和CSS实现JD轮播图
博主使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识. ,如图为两个侧边箭头图片(其实实际中应该使用CSS3的图标字体,这里没有使用). <!DOCTYPE ...
- 数据定义语句(DDL语句)
建立表 create table 表名( 字段名1 类型, 字段名2 类型, ........ 字段名n 类型): 类型有: char(n) 是一个类型,叫定长字符串,数据不够就补空格 v ...
- 自定义MVC框架之工具类-分页类的封装
以前写过一个MVC框架,封装的有点low,经过一段时间的沉淀,打算重新改造下,之前这篇文章封装过一个验证码类. 这次重新改造MVC有几个很大的收获 >全部代码都是用Ubuntu+Vim编写,以前 ...
- HDU4960(SummerTrainingDay03-F dp)
Another OCD Patient Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Ot ...
- css3 content 特殊字符和符号
基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ...