<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<style>
.t-container{}
.t-container h3{ line-height: 2em;}
.t-container p{ height: 1000px;}
.fix-smallnav{ background: #f60; color: #fff; width: 100px; position: fixed; top: 200px; left: 0px;}
.fix-smallnav li{ padding-left: 8px; line-height: 2em;}
</style>
</head>
<body>
<div class="t-container g-w" id="container">
<h3>列表一</h3>
<p></p>
<h3>列表二</h3>
<p></p>
<h3>列表三</h3>
<p></p>
<h3>列表四</h3>
<p></p>
<h3>列表五</h3>
<p></p>
</div>
<ul class="fix-smallnav" id="smallnav"></ul>
<script>
$(function(){
var subtit = $("#container h3");
var smallnav = $("#smallnav");
for(var i=0;i<subtit.size();i++){
smallnav.append("<li>"+subtit.eq(i).text()+"</li>");
}
$("#smallnav li").click(function(){
$('html, body').animate({
scrollTop: subtit.eq($(this).index()).offset().top
},600);
});
})
</script>
</body>
</html>
效果图：
相关推荐
本话题将聚焦于“JQ点击跳转固定位置和对应目录的小标题高亮”这一功能，这在网页设计中常常用于实现用户友好的导航体验。我们将探讨如何通过jQuery实现这一效果，以及相关的编程技巧。 首先，让我们理解需求的两个...
标题“JQ 点击目录跳转固定位置的最终版”指的是使用jQuery（简称JQ）实现的一个功能，即在网页中点击目录时，页面能够自动滚动到对应内容的特定位置。这个功能常见于长篇文档或教程的页面，帮助用户快速定位到他们...
这个文件夹可能包含一个或多个JavaScript文件，其中至少有一个是实现目录自动生成功能的jQuery脚本。在该脚本中，开发者可能会使用`$()`函数来选择页面上的标题元素，然后通过`.each()`迭代每一个标题，获取它们的...
JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转JQ事件进度条自动跳转...
【标题】"仿百度文库自动生成目录自适应版"是一个网页开发项目，旨在实现类似百度文库的功能，能够根据文章内容自动生成目录，并且该功能适用于不同设备，包括个人电脑（PC）和移动设备。这表明项目的核心是创建一个...
最近开发项目有这么一个需求 有一堆A链接关键词,点击后让他跳转到百度自动搜索此关键词,js写法如下,希望可以帮到各位
jQuery 点击按钮自动增加，和减少.
// 初始化倒计时和自动跳转 delayURL("main.jsp?username=<%=name%>"); // 如果用户没有自动跳转，则可以通过点击链接手动跳转 document.getElementById("manualLink").addEventListener("click", function...
总的来说，"jq插件生成二维码"涉及到的技术点包括：jQuery库的使用、DOM操作、JavaScript事件处理、以及二维码编码和解码的原理。这个插件为开发者提供了一种简单、直观的方式来集成二维码功能，极大地提高了开发...
总的来说，这个“jq生成二维码插件”提供了在网页上轻松创建和显示二维码的功能，对于开发者来说，它是一个高效且灵活的工具，能够提升用户体验，尤其是在移动应用和网站中。通过阅读和理解使用文档，开发者可以快速...
`jq`通常指的是jQuery，一个广泛使用的JavaScript库，而本示例是利用jQuery与`QRcode.js`插件来实现二维码的生成。`QRcode.js`是一个轻量级的JavaScript库，能够帮助开发者在网页上创建出包含各种数据的二维码，包括...
"jq生成二维码"是指利用jQuery库来实现这个功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。在这个场景中，我们将讨论如何利用jQuery及其相关的插件来生成...
总之，【jq无缝滚动代码生成器】是实现jQuery无缝滚动效果的一个利器，它降低了技术门槛，提高了开发效率，让网页设计更加生动和互动。对于任何希望在网页中实现无缝滚动效果的开发者来说，这是一个值得尝试的工具。
本主题将深入探讨404错误自动跳转的概念、实现方式以及与JavaScript (js) 和jQuery (jq) 的关联。 首先，404错误是HTTP状态码的一种，表示用户尝试访问的网页无法找到。这可能是因为链接已失效、页面被删除或者输入...
在本文中，我们将深入探讨如何使用jQuery（jq）来创建一个简单的input标签生成器，以及如何结合HTML和CSS实现这一功能。input标签是HTML中用于用户输入数据的基本元素，而jQuery则提供了一种方便的方式来处理DOM操作...
纯前端生成二维码（并将Html转换成图片） 下载到本地,需要用到的四个JS文件 jquery.qrcode.min.js html2canvas.min.js canvas2image.js base64.js
在本项目中，"jq和HTML5自动生成图片缩略科并自动排列.rar" 是一个包含前端技术实现的实例，主要使用了JavaScript库jQuery（jq）以及HTML5的相关功能，来自动化创建图片的缩略图并进行布局。下面将详细阐述这个实例...
"jQ导出PDF自动分页打印代码.zip" 提供的是一套基于jQuery和CSS特效的解决方案，旨在帮助开发者高效地完成这项任务。下面我们将详细探讨这个代码包中的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它...
本资源“JQUERY固定在网站固定位置下拉自动隐藏 上滑动显示导航菜单.rar”显然关注的是一个特定的JavaScript（JS）特效，利用jQuery库实现了一个智能且互动的导航菜单。jQuery是一个轻量级的JavaScript库，它简化了...