控制div跳转到指定位置的若干方法&控制页面定位到指定位置

最新推荐文章于 2024-05-10 19:09:10 发布

u010513603

最新推荐文章于 2024-05-10 19:09:10 发布

阅读量3.6k

点赞数

分类专栏： JQuery 原生js开发

本文链接：https://blog.csdn.net/u010513603/article/details/78547362

版权

JQuery 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

原生js开发

8 篇文章 1 订阅

订阅专栏

方法一：用链接a锚点方法

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

方法二：使用jquery的animate方法

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

方法三：使用window.scrollTo方法

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

location.href = "#firstAnchor"; // firstAnchor为锚点名称

window.location.hash = "#firstAnchor"; // firstAnchor为锚点名称

<script type=”text/javascript”> $(function(){ window.location.hash = "#title"; }) </script>

经测试：hash只会在跳转到此页面的第一次起作用，再次刷新此页面将不起作用，而href始终起作用

window.location对象属性介绍：

Location对象属性

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对象方法

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() 方法。

方法四：用js的srollIntoView方法

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);
})
})
注意一个问题，object.scrollIntoView(bool),前面是对象，通常原生的获取对象都是下面的写法：
document.getElementById('#xxx' ).scrollIntoView(true);
那么如果用jquery来调用该方法的话，需要写成下面这样的：
$('#xxx')[0].scrollIntoView(true);

方法五：

5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码：

js部分：

 
         return 
         cPageView.extend({ 
        
         pageid: 10320608681, 
        
         hpageid: 10320608681, 
        
         events: { 
        
         "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.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); 
        
         } 
        
         } 
        
         }, 
        
         应用实例：

u010513603

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
控制div跳转到指定位置的若干方法&控制页面定位到指定位置

方法一：用链接a锚点方法 div1 div2 div3 div1 div2 div3css样式：div { height: 800px; width: 400px; border: 2px solid black; }#container{ position: fix
复制链接

扫一扫