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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
javaScript中的空值和假值
Dec 18 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
javascript 控制弹出窗口
2007/04/10 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python如何执行系统命令
2020/09/23 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
求职信需要的五点内容
2014/02/01 职场文书
行政内勤岗位职责
2014/04/07 职场文书
在校实习生求职信
2014/06/18 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
家长会欢迎词
2015/01/23 职场文书
冰峪沟导游词
2015/02/09 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫
Python闭包的定义和使用方法
2022/04/11 Python
python如何为list实现find方法
2022/05/30 Python