`

js实现锚点定位

    博客分类:
  • js
阅读更多
js实现锚点定位的原理是,算出定位的标签距离顶部的高度,点击触发标签,重新赋值滚动条的高度到达指定位置。

<!DOCTYPE html>
<html>
<head>
<title>letter.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="../standard/plugins/bootstrap/css/bootstrap.css" type="text/css"></link>
</head>

<body ng-app="letter_App" ng-controller="letter_Ctrl">
	<div>
		<span>索引:</span> <span ng-click="btn_letter_onclick('A')" >A</span> <span
			ng-click="btn_letter_onclick('B')">B</span> <span
			ng-click="btn_letter_onclick('C')">C</span> <span
			ng-click="btn_letter_onclick('D')">D</span> <span
			ng-click="btn_letter_onclick('E')">E</span> <span
			ng-click="btn_letter_onclick('F')">F</span> <span
			ng-click="btn_letter_onclick('G')">G</span> <span
			ng-click="btn_letter_onclick('H')">H</span> <span
			ng-click="btn_letter_onclick('I')">I</span> <span
			ng-click="btn_letter_onclick('J')">J</span> <span
			ng-click="btn_letter_onclick('K')">K</span> <span
			ng-click="btn_letter_onclick('L')">L</span> <span
			ng-click="btn_letter_onclick('M')">M</span> <span
			ng-click="btn_letter_onclick('N')">N</span> <span
			ng-click="btn_letter_onclick('O')">O</span> <span
			ng-click="btn_letter_onclick('P')">P</span> <span
			ng-click="btn_letter_onclick('Q')">Q</span> <span
			ng-click="btn_letter_onclick('R')">R</span> <span
			ng-click="btn_letter_onclick('S')">S</span> <span
			ng-click="btn_letter_onclick('T')">T</span> <span
			ng-click="btn_letter_onclick('U')">U</span> <span
			ng-click="btn_letter_onclick('V')">V</span> <span
			ng-click="btn_letter_onclick('W')">W</span> <span
			ng-click="btn_letter_onclick('X')">X</span> <span
			ng-click="btn_letter_onclick('Y')">Y</span> <span
			ng-click="btn_letter_onclick('Z')">Z</span> <span
			ng-click="btn_letter_onclick('other')">其他</span>
	</div>
	<div style="height: 800px;">定位</div>
	<div class="z_A">A</div>
</body>
<script type="text/javascript"
	src="../standard/plugins/angular/angular.js"></script>
<script type="text/javascript"
	src="../standard/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
	var letter_App = angular.module("letter_App", []);
	letter_App.controller("letter_Ctrl", function($scope, $http) {
		$scope.btn_letter_onclick = function(letter) {
			$(document).scrollTop($('.z_' + letter).offset().top);
		};
	});
</script>
</html>

2
0
分享到:
评论

相关推荐

    JS如何实现在页面上快速定位(锚点跳转问题)

    目前,a标签的href属性可以与id属性结合使用,不仅能够作为超链接使用,还能作为锚点定位目标。 此外,URL中的“#”符号经常被用作锚点的标志。当在浏览器地址栏输入一个带有锚点的URL时,浏览器会尝试跳转到页面中...

    【JavaScript源代码】vue实现锚点定位功能.docx

    总结,Vue.js 实现锚点定位功能结合了 HTML、CSS 和 JavaScript 三者的力量,通过监听滚动事件,动态更新视图状态,以及使用平滑滚动技术,提供了一种优雅的页面导航体验。在实际开发中,开发者还应关注性能优化,...

    js锚点定位

    #### 使用JavaScript实现锚点定位 除了传统的HTML方式外,我们还可以利用JavaScript来动态地控制锚点定位。这通常涉及到对`window.location.hash`属性的操作。`window.location.hash`可以获取当前URL中的锚点部分...

    jQuery页面滚动显示浮动菜单栏锚点定位效果

    本主题聚焦于利用jQuery实现一个特定的功能——当页面滚动时,展示一个浮动菜单栏,并实现锚点定位效果。这个功能对于提高用户体验,尤其是内容丰富的长页面,是非常有用的,因为它可以帮助用户快速导航到页面的不同...

    Vue监听滚动实现锚点定位(双向)示例

    在介绍如何使用Vue监听滚动事件实现锚点定位之前,我们首先要了解几个关键的概念和技术点,这些包括Vue框架本身、锚点定位的原理以及监听滚动事件在实现页面内导航中的应用。 Vue.js 是一个构建用户界面的渐进式...

    前端-搜索高亮、字体放大及锚点定位功能

    在前端开发中,实现搜索高亮、字体放大和锚点定位功能是提升用户体验的重要手段。以下将详细讲解这些功能的实现方法,以及如何在nuxt.js框架和elementUI组件库中进行应用。 首先,让我们来看搜索高亮。搜索高亮是在...

    微信小程序实现锚点定位楼层跳跃的实例

    微信小程序实现锚点定位楼层跳跃的实例 了解微信小程序实现锚点定位楼层跳跃的实例是非常重要的,特别是在微信小程序开发中,需要实现锚点定位楼层跳跃的功能时。本文将详细介绍微信小程序实现锚点定位楼层跳跃的...

    jQuery锚点定位全屏滚动切换代码

    这个插件专门用于实现锚点定位和全屏滚动切换效果。它的工作原理是监听滚动事件,当页面滚动到特定的DOM元素(通常与页面上的锚点关联)时,会触发平滑滚动动画,将页面定位到相应的部分。 在项目中,`index.html`...

    jquery a标签锚点定位特效.zip

    通过查看和学习这个文件,你可以更深入地理解如何结合jQuery来实现锚点定位特效。 总结起来,"jquery a标签锚点定位特效"是一种利用jQuery改进传统锚点链接的方法,它提供了平滑的滚动动画,提升了用户在网页浏览时...

    jQuery网页锚点定位 平滑滚动 导航菜单代码

    本教程将详细讲解如何使用jQuery实现网页锚点定位和平滑滚动,以及创建响应式的导航菜单。 首先,我们要理解锚点定位的基本原理。在HTML中,我们可以为任何元素添加一个`id`属性,然后通过URL中的`#`符号引用这个id...

    锚点定位.rar

    综上所述,"锚点定位.rar"这个项目主要涵盖了HTML锚点的创建和使用,以及结合JavaScript实现平滑滚动的技巧。通过学习和实践这个案例,开发者可以更好地理解和掌握网页内的导航定位,提高用户在浏览长页面时的交互...

    实现锚点的带动画效果

    1. jQuery插件:有许多现成的jQuery插件如` waypoints.js `或` scrollmagic.js `可以帮助实现锚点动画。它们监听滚动事件,当特定元素进入视口时触发动画。 2. 自定义JavaScript:如果你不依赖外部库,可以手动监听...

    jQuery侧边导航锚点定位代码.zip

    本资源"jQuery侧边导航锚点定位代码.zip"聚焦于利用jQuery实现一种特定的交互效果——侧边导航与页面锚点定位。这种技术在现代网页设计中非常常见,尤其是用于内容丰富的长页面,可以提供良好的用户体验,帮助用户...

    jQuery侧边栏固定层锚点定位代码.zip

    在网页设计中,侧边栏固定层锚点定位是一种常见的交互设计手法,它能提供良好的用户体验,尤其是在...通过学习和理解这个代码,开发者不仅可以实现侧边栏固定层锚点定位,还能进一步提升对jQuery和网页交互设计的理解。

    onclick锚点定位

    在网页设计中,"onclick锚点定位"是一种常见的交互技术,它允许用户通过点击按钮或链接,快速跳转到页面内的特定位置。这种技术主要基于HTML的锚点(Anchor)元素和JavaScript的onclick事件,结合CSS来实现页面右侧...

    js 模仿锚点定位的实现方法

    在提供的代码中,JavaScript 通过jQuery库来实现锚点定位。以下是主要步骤的详细说明: 1. **选择元素**: 首先,使用`$('#scroll_nav').find('a')`选取导航栏中的所有链接元素,这些链接将作为锚点的触发器。同时...

    jquery实现的a标签锚点定位特效源码.zip

    在纯JavaScript中,实现锚点定位可能涉及到滚动页面到相应的位置,但jQuery提供了更简洁的方法。使用jQuery的`animate`函数,我们可以平滑地滚动到页面上的特定位置,而不是立即跳转,从而实现一种特效。下面是一个...

    jQuery网站右侧锚点定位跳转导航菜单代码.zip

    三、jQuery实现锚点定位 在jQuery中,可以使用`scrollTop()`方法配合`animate()`函数实现平滑的页面滚动效果。当用户点击导航菜单项时,触发相应的jQuery事件,通过计算目标元素距离顶部的距离,然后使用`animate()...

Global site tag (gtag.js) - Google Analytics