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程序设计有所帮助。
相关推荐
-
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
如下所示: 复制代码 代码如下: //返回数组类型 function findPosition(oElement) {//oElement 当前元素 if (typeof (oElement.offsetParent) != 'undefined') { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
-
JavaScript实现拖拽网页内元素的方法
本文实例讲述了JavaScript实现拖拽网页内元素的方法.分享给大家供大家参考.具体如下: 这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴. /** * 跨平台的事件监听函数 * @param {Node} node 需要监听事件的DOM节点 * @param {String} eventType 需要监听的事件类型 * @param {Function} callback 事件监听回调函数 * @type Function 返回值为函数类型 * @return 返回监听回调函数的引用
-
JavaScript驾驭网页-获取网页元素
推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪.只是不用收拾列羹剩肴,但也没有办法享受美味的成果. 不过,你将能完整网页内容的HTML构成要素:更重要的是,你将拥有替换网页成分的能力. JavaScript让你可以随心所欲地操控网页的HTML代码,从而打开各种有趣的机会之门,一切都是因为标准对象:DOM的存在 getElementById HTML标签都有一个"id"
-
JavaScript中计算网页中某个元素的位置
由于项目的需要,测试中需要对网页元素进行截图,以确保它看上去没有问题.之前我写过一篇文章介绍过一种方法,先使用 WebDriver 进行全屏截图,然后根据目标元素(DOM Element)所在的位置,再对截下来的图片进行剪裁,保留我们需要的位置即可. 那段代码一直都工作得很好,直到我知道了一个东西:iframe.iframe(普通的 frame 也是一样的,不过 frame 现在不太常见,这里只用 iframe 举例)中的内容被视为一个独立的网页,连 Window 对象也是和它的父级网页分开的.
-
原生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实现拖拽并替换网页块元素
找了一些现成的插件,发现都不太符合我的需求,于是参考网上的例子自己实现了一个,还没有优化. 还是贴代码吧: 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
-
用JS实现网页元素阴影效果的研究总结
前两天由于一个小项目想为一元素添加一个阴影效果,但是记得看过某高人写的"用Div/CSS模拟阴影效果"文章,现在还有一点印象,其思路很简单,主要是利用几个层的定位偏移来实现的阴影特效,于是偶就想能不能封装成一个js函数,方便在每个html对象上调用. 开始偶以为很简单,但实现过程中确遇到了很多问题,其中最严重的就是浏览器的兼容问题,整整耗了偶整个晚上加半个通宵的时间才搞定,汗呢!不过从这个小东西让我对js及一些浏览器之间的差异及解决办法有了更多更深刻的认识. 总结于此,以备以后查看方便
-
JavaScript实现自动生成网页元素功能(按钮、文本等)
创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>
-
JavaScript动态修改网页元素内容的方法
本文实例讲述了JavaScript动态修改网页元素内容的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码当用户点击提交按钮后,通过元素的textContent或者innerHTML动态指定元素的内容 <script type="text/javascript"> function showCard() { var message = document.getElementById("CCN").value; var element = docu
-
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跳转到指定的位置的几种解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 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
随机推荐
- webpack3之loader全解析
- Flex文件读取报错示例
- Apache、Nginx 服务配置服务器端包含(SSI)
- java Person,Student,GoodStudent 三个类的继承、构造函数的执行
- ios实现app强制更新功能
- vue绑定设置属性的多种方式(5)
- Zend Framework 2.0事件管理器(The EventManager)入门教程
- PHP实现视频文件上传完整实例
- Python MD5加密实例详解
- 用asp实现网址和邮件地址的转换函数
- JSP 开发之Spring Boot 动态创建Bean
- Android控件系列之EditText使用方法
- php利用GD库生成缩略图示例
- SQL server服务显示远程过程调用失败的解决方法
- java数据结构与算法之奇偶排序算法完整示例
- CentOS 6下root密码忘记的解决办法
- python实现从本地摄像头和网络摄像头截取图片功能
- ES6基础之字符串和函数的拓展详解
- 支付宝小程序自定义弹窗dialog插件的实现代码
- 在Spring Boot中如何使用Cookies详析