页面加载完毕后,自动滚动到指定(如观看视频,图片的最佳)的位置。
关键代码如下:
<script language="JavaScript">
$(function($) {
var h=$("#aa").scrollTop();
$("body").animate({scrollTop:$("#aa").offset().top},3000);
});
红体字为要修改的参数,其它的不变即可。
注意在引入jquery库哦。
demo如下:
<!DOCTYPE html public "-//w3c//dtd html 4.0 transitional//EN">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=GBK">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
<meta http-equiv="expires" content="0">
<script language="javascript"src="jquery.js"></script>
</head>
<script language="JavaScript">
$(function($) {
var h=$("#aa").scrollTop();
$("body").animate({scrollTop:$("#aa").offset().top},3000);
});
</script>
<body >
<h1>bbbbbbbbbbbbbbbbbbb
</h1>
<form method=post action="">
<input type="text" name="" id="aaaa" class="{required:true,minlength:3,maxlength:4,messages:{required:'请填写登录名'}}">
<pre>
jQuery.getPos = function (e)
{
var l = 0;
var t = 0;
var w = jQuery.intval(jQuery.css(e,'width'));
var h = jQuery.intval(jQuery.css(e,'height'));
var wb = e.offsetWidth;
var hb = e.offsetHeight;
while (e.offsetParent){
l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
e = e.offsetParent;
}
l += e.offsetLeft + (e.currentStyle?jQuery.intval(e.currentStyle.borderLeftWidth):0);
t += e.offsetTop + (e.currentStyle?jQuery.intval(e.currentStyle.borderTopWidth):0);
return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
};
jQuery.getClient = function(e)
{
if (e) {
w = e.clientWidth;
h = e.clientHeight;
} else {
w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
}
return {w:w,h:h};
};
<a id="aa" href="#" >div1div1</a>
jQuery.getScroll = function (e)
{
if (e) {
t = e.scrollTop;
l = e.scrollLeft;
w = e.scrollWidth;
h = e.scrollHeight;
} else {
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;
l = document.documentElement.scrollLeft;
w = document.documentElement.scrollWidth;
h = document.documentElement.scrollHeight;
} else if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
}
return { t: t, l: l, w: w, h: h };
};
jQuery.intval = function (v)
{
v = parseInt(v);
return isNaN(v) ? 0 : v;
};
jQuery.fn.ScrollTo = function(s) {
o = jQuery.speed(s);
return this.each(function(){
new jQuery.fx.ScrollTo(this, o);
});
};
jQuery.fx.ScrollTo = function (e, o)
{
var z = this;
z.o = o;
z.e = e;
z.p = jQuery.getPos(e);
z.s = jQuery.getScroll();
z.clear = function(){clearInterval(z.timer);z.timer=null};
z.t=(new Date).getTime();
z.step = function(){
var t = (new Date).getTime();
var p = (t - z.t) / z.o.duration;
if (t >= z.o.duration+z.t) {
z.clear();
setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
} else {
st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
z.scroll(st, sl);
}
};
z.scroll = function (t, l){window.scrollTo(l, t)};
z.timer=setInterval(function(){z.step();},13);
};
其实还更简单的办法:
$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);
</pre>
</form>
<a href="Noname1.html">Noname1.html</a>
</body>
</html>
分享到:
相关推荐
昨天有一需求,是希望页面加载完毕后向左自动滚动一定位置。 一直以为只要给页面的 document.documentElement.scrollLeft 设置一个数值就生效,结果失望了~ 今天抽空一查,才发现: 使用document.documentElement....
4. 通过`setTimeout`在延迟`delay`时间后启动滚动,确保页面加载完毕后再开始滚动。 此代码示例中,有两个滚动区域,分别调用`startmarquee`函数两次,设置了不同的滚动速度和延迟,以达到不同的滚动效果。例如,`...
这段JavaScript代码实现了一个功能:当页面加载完毕后自动滚动到顶部,并且每隔一段时间向下滚动一行。此外,当鼠标按下时停止滚动,双击则重新开始滚动。这样的设计可能用于创建某种视觉上的特殊效果,例如让页面看...
6. **优化用户体验**:为了防止频繁请求,可以设置加载状态(如显示加载中的动画),并在数据加载完毕后隐藏。此外,为了避免用户反复触发加载,可以添加一个标记来确认是否已经加载了所有数据。 在压缩包中的"HTMl...
5. **用户体验优化**:为了提供更好的用户体验,我们可能需要添加一些加载指示器(如旋转的加载图标),在数据加载期间显示,数据加载完毕后隐藏。另外,为了避免不必要的网络请求,我们可以在用户滚动速度过快时...
5. **处理边界情况**:当所有数据都已加载完毕,应停止监听滚动事件并隐藏加载指示器,防止不必要的请求。 在 `readMe.txt` 文件中,可能会包含更详细的实现思路和代码注释,帮助理解这两个版本的代码差异。通过...
加载完毕后,确保新加载的内容与现有内容无缝融合,避免视觉上的突兀;同时,应提供一个方式让用户访问未被自动加载的历史内容,例如设置页码导航。 6. **移动端适配**:对于移动设备,考虑到屏幕大小和网络条件,...
这种技术特别适用于无限滚动的网页设计,如社交媒体新闻 feed 或电商产品列表,使得用户可以流畅地浏览页面,无需等待整个页面完全加载完毕。 MinggeJS 是这个插件背后的JavaScript库,它提供了一套简单易用的API,...
这个函数的作用是在页面加载完毕后启动自动滚动机制。它通过调用 `setInterval` 方法每隔50毫秒执行一次 `scrollwindow()` 函数,从而实现连续滚动的效果。 ##### scrollwindow() 函数 ```javascript function ...
同时,为了保持用户体验的一致性,可以添加适当的加载提示,如加载动画,直到新内容完全加载完毕。 在处理图片的异步加载时,可以使用延迟加载(Lazy Loading)技术。当图片即将进入视口(即将可见)时,才发起请求...
同时,更新加载指示器的状态,告知用户数据正在加载或已加载完毕。 7. **防止重复加载**:为了优化用户体验,需要确保在请求未完成之前,不会触发新的请求。这可以通过设置一个标志变量或利用jQuery的`$.ajaxStart...
在这个特效中,主要需要用到`$(document).ready()`函数来确保页面加载完毕后执行代码,`setInterval()`或`setTimeout()`用于设置定时器,实现图片的自动滚动。`hover()`函数则用于监听鼠标悬停事件,触发遮罩层的...
而`onload`事件则在页面所有资源(包括图片、脚本等)完全加载完毕后触发,此时可以关闭加载动画,显示完整的页面内容。 在这个项目中,有两个不同的加载效果,可能一个是基于HTML字符实体的简单滚动动画,另一个...
这个过程通常通过Ajax异步请求完成,确保页面加载流畅,不会阻塞用户的滚动操作。 2. **API接口设计**:后端开发者需要设计一个能处理这种分块加载数据的API。通常,这个接口需要接收一个参数,比如页码或偏移量,...
1. `autoplay`:默认情况下,视频加载完毕后自动播放。但在微信小程序中,为了用户体验,通常需要手动触发播放。 2. `x5-video-player-type`:针对X5内核(如QQ浏览器)设置,可以设置为`"h5"`,以便在页面滚动时...
- 反馈状态:提供加载状态的反馈,比如显示“加载中”提示或者动画效果,加载完毕后隐藏。 三、相关技术与库 在提供的文件列表中,我们看到以下文件: - `index.html`:这是HTML主文件,包含了页面结构和内容,...
5. **更新状态**:如果所有数据已加载完毕,应禁用滚动监听,防止不必要的请求。 以上只是一个基础的实现框架,实际应用中可能需要考虑更多细节,比如加载动画、错误处理、分页逻辑等。在提供的`index.html`和`js`...
- 模式三:无限滚动,模拟无边界的效果,不断加载直到所有数据加载完毕。 4. 添加头部 - RecyclerView可以轻松地添加头部视图,只需要在Adapter的 onCreateViewHolder() 方法中创建头部视图,并在 ...
在Vue.js应用中,有时我们需要实现一个功能,即当用户进入页面时,滚动条自动定位到页面底部。...注意,这种方法适用于静态内容,若内容是动态加载的,可能需要监听新内容加载完毕后再次滚动到底部。