jquery实现指定元素到页面顶部的方式 |
您所在的位置:网站首页 › jquery页面滚动到指定元素 › jquery实现指定元素到页面顶部的方式 |
在编辑前端页面的过程中,会有一种效果图叫做轮播,轮播的主要方式是横向的,但是今天我举的例子是类似轮播的纵向动态切换图片。 一、基础知识储备如下: 1、获取浏览器以及页面的宽高信息 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 :$(window).width(); 获取页面的文档高度 :$(document).height(); 获取页面的文档宽度 :$(document).width(); 2、获取滚动条的相关信息 获取滚动条到顶部的垂直高度 :$(document).scrollTop(); 获取滚动条到左边的垂直宽度 :$(document).scrollLeft(); 3、获取当前元素的偏移信息 获取当前元素相对于body顶部的偏移信息 :$(selector).offset().top 获取当前元素相对于body左侧的偏移信息 :$(selector).offset().left 4、动画效果实现页面滚动 var scroll_offset = $(selector).offset(); //得到selector的offset,包含两个值,top和left $("body,html").animate({ scrollTop:scroll_offset.top //让body的scrollTop等于selector的top,就实现了滚动 },动画持续的时间); 【注】动画持续时间用 100 1000 等类似的整数表示。 【注】用alert()方法弹出的方式可以看到值,但是用console.log()打印出来的则是一个很复杂的对象。 二、举例说明 实现纵向的div界面切换效果。 方法:1、给div绑定一个id 为 one 2、搭建滚动效果的函数 function getTop() { var top = $("#one").offset().top; $("body,html").animate({ scrollTop: top },500); } 3、编辑事件触发函数 $("a").click(function(){ getTop(); // 调用该函数,实现对应效果 //业务逻辑代码...... });
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |