<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <!-- scrollTo() 方法可把内容滚动到指定的坐标。 语法 scrollTo(xpos,ypos) 参数 描述 xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。 ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。 --> <body onload="scrollTo(0,200);"> <div style="height:200px; background:#f60;"> <p>导航</p> </div> <div style=" height:2000px; background:#06f;"> <p>内容</p> </div> </body> </html>
效果图：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ScrollTo：平滑滚动到页面指定位置</title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.js"></script>
<style type="text/css">
.nav{width:500px; height:40px; margin:20px auto;}
.nav li{float:left; width:100px; height:24px; line-height:24px}
.box{height:500px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
#pro,#ser,#job{ background-color:#f60;}
#news,#con{ background:#06f;}
</style>
</head>
<body>
<ul class="nav">
<li><a href="javascript:void();" class="nav_pro">产品展示</a></li>
<li><a href="javascript:void();" class="nav_news">新闻中心</a></li>
<li><a href="javascript:void();" class="nav_ser">服务支持</a></li>
<li><a href="javascript:void();" class="nav_con">联系我们</a></li>
<li><a href="javascript:void();" class="nav_job">人才招聘</a></li>
</ul>
<div id="pro" class="box">
<h3>产品展示</h3>
</div>
<div id="news" class="box">
<h3>新闻中心</h3>
</div>
<div id="ser" class="box">
<h3>服务支持</h3>
</div>
<div id="con" class="box">
<h3>联系我们</h3>
</div>
<div id="job" class="box">
<h3>人才招聘</h3>
</div>
<script type="text/javascript">
$(function(){
$(".nav_pro").click(function(){
$.scrollTo('#pro',500);
});
$(".nav_news").click(function(){
$.scrollTo('#news',800);
});
$(".nav_ser").click(function(){
$.scrollTo('#ser',1000);
});
$(".nav_con").click(function(){
$.scrollTo('#con',1200);
});
$(".nav_job").click(function(){
$.scrollTo('#job',1500);
});
});
</script>
</body>
</html>
效果图：
相关推荐
ScrollTo插件的基本用法是通过jQuery的scrollTo方法实现的，该方法可以直接传入坐标参数或目标元素参数来完成滚动。scrollTo方法接受两个必需的参数：xpos和ypos，它们分别代表了目标位置的X轴和Y轴坐标。当调用...
最简单的滚动到（scrollto）插件，功能少，jquery代码少，逻辑简单，一看就明白。这种简单的jquery插件有时候还是蛮有用的。 这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法，比如，可以做出 滚动到顶部...
在网页开发中，jQuery（通常简称为jq）是一种广泛使用的JavaScript库，它简化了许多DOM操作、事件处理和动画效果。本教程将聚焦于一个特定的jQuery功能：平滑移动和定位到锚链接（anchor links）。这是一项提升用户...
此外，还需要编写点击事件处理函数，使得点击按钮时，页面平滑滚动回顶部，可以使用`window.scrollTo`方法配合动画效果。 4. **jQuery**：jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画制作。...
3. 使用JavaScript或jQuery监听链接的点击事件，当点击时，调用`scrollTo`或`animate`方法实现平滑滚动。 4. 可选地，使用Bootstrap的导航条组件和CSS样式增强用户体验。 通过学习和实践这个示例，开发者可以掌握...
### 使用方法 - **安装**：`jQuery.scrollTo` 通常作为`.js`文件引入到项目中，可以下载`jquery.scrollTo-master`压缩包，然后在HTML文件中通过`<script>`标签引用。 - **基本调用**：调用`$.fn.scrollTo()`方法，...
当用户点击`#scrollTo`按钮时，会触发一个JavaScript函数，该函数计算当前滚动位置并加上目标偏移量，然后使用`animate()`方法在1秒内平滑地滚动到新位置。 需要注意的是，`scrollTop()`方法用于获取或设置元素的...
- `scrollTo`：滚动到指定位置。 - `update`：重新计算滑条尺寸，适用于动态内容。 6. **案例分析** 提供的 `jQuery-slimScroll-master` 压缩包可能包含各种示例和源代码，这将帮助你深入理解如何在不同场景下...
5. **滚动效果插件**: 如jQuery ScrollTo，实现页面元素的平滑滚动。 6. **时间日期插件**: 如jQuery Datepicker，方便用户选择日期。 **深入jQuery** 1. **AJAX**: jQuery简化了异步数据请求，`$.ajax()`和`$....
3. **初始化插件**：在页面加载完成后，使用jQuery选择器找到需要应用滚动效果的元素，并调用插件的方法进行初始化。例如，以下代码实现了页面的平滑滚动： ```javascript $(document).ready(function() { $('...
在网页开发中，有时我们需要实现一个功能，即页面加载完成后，滚动条自动...这两种方法都简单易懂，可以根据项目的需求和环境来选择使用。在实际开发中，还可以结合其他技术，如监听滚动事件，实现更复杂的滚动效果。
- 遵循插件的使用文档，了解其配置选项和方法。 - 考虑插件的兼容性和性能，避免对页面加载速度造成过大影响。 - 对于第三方插件，保持及时更新以获取最新特性并修复已知问题。 总之，jQuery动态插件是现代网页开发...
3. **学习API文档**：每个第三方API都有详细的文档，学习并理解其使用方法。 4. **编写代码**：根据需求，在jQuery的选择器、事件、方法中嵌入API的调用。 5. **测试与调试**：在实际环境中测试API的功能，进行必要...
本文将深入探讨Tiny Scrollbar的使用方法、功能特性以及如何在项目中集成。 1. **Tiny Scrollbar的基本概念** Tiny Scrollbar是一款轻量级的jQuery插件，它允许开发者自定义滚动条的外观，以匹配网站或应用的UI...
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置，方便自动定位。 代码如下: var container = $(‘div’), scrollTo = $(‘#row_8’); container.scrollTop( scrollTo.offset().top – container.offset()...
在网页交互设计中，用户友好性和易用性是非常重要的因素，而实现页面元素的点击滚动...同时，为了兼容不同的浏览器和设备，开发者还需要考虑使用`window.scrollTo()`等原生方法作为备选方案，以确保功能的广泛适用性。
返回顶部这个功能用jq实现,好容易实现,一个animate配合scrollTo就搞定了 今天我们来试试vue封装一个原生js实现的返回顶部; 写起来够呛,借助github,看了别人的gist,稍微封装了下; 当然不是用scrollTo直接调位那种,...
- 为键盘按键绑定事件监听器，如`$(document).keydown()`，监听用户按下上/下箭头键，然后使用`$('html, body').animate()`或`scrollTo()`方法平滑滚动到下一个或上一个页面部分。 4. **响应式设计**： - 单页...