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 相关文章推荐
jQuery AjaxQueue改进步骤
Oct 06 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
node中的cookie的具体使用
Sep 13 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
JavaScript 装逼指南(js另类写法)
May 10 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
Laravel 5 学习笔记
2015/03/06 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
深入了解Vue3模板编译原理
2020/11/19 Vue.js
jQuery实现全选按钮
2021/01/01 jQuery
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
BudgetAir印度:预订航班、酒店和汽车租赁
2019/07/07 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
精彩的推荐信范文
2013/11/26 职场文书
公司董事长职责
2013/12/12 职场文书
新员工欢迎词
2014/01/12 职场文书
函授生自我鉴定
2014/03/25 职场文书
三方合作协议书范本
2014/04/18 职场文书
报名委托书
2015/01/29 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书