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


Posted in Javascript onNovember 05, 2016

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

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

该锚点法,不需要任何的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>
  <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;
  });
});

3.简单的window.scrollTo方法使用,这里不再详细说,看下用法。

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

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

4.用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);
         }
       }
     },

看下效果如下所示:
JS控制div跳转到指定的位置的几种解决方案总结
在chrome下测试和真机测试,效果都还行,这个需求主要是,没法通过高度来控制完成,因为,我们这个中间的内容元素都是动态加载进来的,高度是变得

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
了解一点js的Eval函数
Jul 26 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
Jan 08 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 #Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 #Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 #Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 #Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 #Javascript
Javascript 普通函数和构造函数的区别
Nov 05 #Javascript
Javascript 函数的四种调用模式
Nov 05 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
六十大寿答谢词
2014/01/12 职场文书
优秀学生获奖感言
2014/02/15 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
护士节策划方案
2014/05/19 职场文书
兵马俑的导游词
2015/02/02 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
英语教学课后反思
2016/02/15 职场文书