JavaScript控制网页平滑滚动到指定元素位置的方法

本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法。分享给大家供大家参考。具体如下：

function elementPosition(obj) {
  var curleft = 0, curtop = 0;
  if (obj.offsetParent) {
   curleft = obj.offsetLeft;
   curtop = obj.offsetTop;
   while (obj = obj.offsetParent) {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
   }
  }
  return { x: curleft, y: curtop };
}
function ScrollToControl(id)
{
 var elem = document.getElementById(id);
 var scrollPos = elementPosition(elem).y;
 scrollPos = scrollPos - document.documentElement.scrollTop;
 var remainder = scrollPos % 50;
 var repeatTimes = (scrollPos - remainder) / 50;
 ScrollSmoothly(scrollPos,repeatTimes);
 window.scrollBy(0,remainder);
}
var repeatCount = 0;
var cTimeout;
var timeoutIntervals = new Array();
var timeoutIntervalSpeed;
function ScrollSmoothly(scrollPos,repeatTimes)
{
 if(repeatCount < repeatTimes)
 {
 window.scrollBy(0,50);
 }
 else
 {
 repeatCount = 0;
 clearTimeout(cTimeout);
 return;
 }
repeatCount++;
cTimeout = setTimeout("ScrollSmoothly('"+scrollPos+"','"+repeatTimes+"')",10);
}

使用方法：

ScrollToControl('elementID');

页面将会平滑的滚动到元素elementID所在的位置

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 用JS实现网页元素阴影效果的研究总结

    前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章,现在还有一点印象,其思路很简单,主要是利用几个层的定位偏移来实现的阴影特效,于是偶就想能不能封装成一个js函数,方便在每个html对象上调用． 开始偶以为很简单,但实现过程中确遇到了很多问题,其中最严重的就是浏览器的兼容问题,整整耗了偶整个晚上加半个通宵的时间才搞定,汗呢!不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识． 总结于此,以备以后查看方便

  • JavaScript中计算网页中某个元素的位置

    由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题.之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可. 那段代码一直都工作得很好,直到我知道了一个东西:iframe.iframe(普通的 frame 也是一样的,不过 frame 现在不太常见,这里只用 iframe 举例)中的内容被视为一个独立的网页,连 Window 对象也是和它的父级网页分开的.

  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

  • 原生JS操作网页给p元素添加onclick事件及表格隔行变色

    原生JS操作网页给p元素添加onclick事件及表格隔行变色

    1. 给网页中的所有p元素添加onclick事件: 复制代码 代码如下: <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>Insert title here</title> <!-- <script src="jQuery/jquery-1.10.2.

  • javascript实现拖拽并替换网页块元素

    javascript实现拖拽并替换网页块元素

    找了一些现成的插件,发现都不太符合我的需求,于是参考网上的例子自己实现了一个,还没有优化.  还是贴代码吧: dragtoreplace DragToReplaceDeom #displayRoom{background:#eee;position:relative;float:left;clear:both;padding:30px 0px 0px 20px;margin-left:20px;margin-top:10px;} .row{display:inline-block;float:l

  • JavaScript驾驭网页－获取网页元素

    推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"

  • JavaScript实现拖拽网页内元素的方法

    本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType 需要监听的事件类型 * @param {Function} callback 事件监听回调函数 * @type Function 返回值为函数类型 * @return 返回监听回调函数的引用

  • JavaScript动态修改网页元素内容的方法

    本文实例讲述了JavaScript动态修改网页元素内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容 <script type="text/javascript"> function showCard() { var message = document.getElementById("CCN").value; var element = docu

  • js获取触发事件元素在整个网页中的绝对坐标(示例代码)

    如下所示: 复制代码 代码如下: //返回数组类型        function findPosition(oElement) {//oElement 当前元素            if (typeof (oElement.offsetParent) != 'undefined') {                for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {               

  • JavaScript控制网页平滑滚动到指定元素位置的方法

    本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu

  • jQuery实现点击滚动到指定元素上的方法分析

    本文实例讲述了jQuery实现点击滚动到指定元素上的方法.分享给大家供大家参考,具体如下: jquery 点击滚动到指定元素上, 1.获取指定元素的offset() 得到偏移位置,返回结果是top 和left  获取offset().top , offset().left 单位是像素 只对可见元素有效 2.body 和html 使用animate方法的scrollTop股东到指定位置 3.id参数为滚动到指定元素的ID, p_top是指定元素的margin 和padding值,这个值暂时没有意义

  • JavaScript获取指定元素位置的方法

    本文实例讲述了JavaScript获取指定元素位置的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: function showpane() {   var self = document.getElementById("eID");   var left = self.getBoundingClientRect().left + document.documentElement.scrollLeft;   var top = self.getBoundingClientR

  • jQuery实现平滑滚动到指定锚点的方法

    本文实例讲述了jQuery实现平滑滚动到指定锚点的方法.分享给大家供大家参考.具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能 // HTML: // <h1 id="anchor">Lorem Ipsum</h1> // <p><a href="#anchor" class="topLink">Back t

  • jquery 点击元素后,滚动条滚动至该元素位置的方法

    点击元素后,滚动条滚动至该元素位置: $('a.lead-link').bind('click', function(e) { e.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top - 60 }, 1500); }); 以上这篇jquery 点击元素后,滚动条滚动至该元素位置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JavaScript控制网页层收起和展开效果的方法

    本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q

  • Vue引入jquery实现平滑滚动到指定位置

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵...根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话...我还是继续研究

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

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

    总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: <div id="container"> <a href="#div1">div1</a> <a href="#div2">div2</a> <a href="#div3">d

  • JavaScript比较当前时间是否在指定时间段内的方法

    本文实例讲述了JavaScript比较当前时间是否在指定时间段内的方法.分享给大家供大家参考,具体如下: function checkTime(stime, etime) { //开始时间 var arrs = stime.split("-"); var startTime = new Date(arrs[0], arrs[1], arrs[2]); var startTimes = startTime.getTime(); //结束时间 var arre = etime.split(

  • JS控制网页动态生成任意行列数表格的方法

    本文实例讲述了JS控制网页动态生成任意行列数表格的方法.分享给大家供大家参考.具体分析如下: 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码,直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 复制代码 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-siz

随机推荐