Page Scroll Menu (页面中锚点菜单)
当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll Menu),方便用户快速了解页面的概要及目录并快速定位到相应的目录。
实现方式:
1. 将页面按照内容分成不同的Section, 页面加载时读取各个Section并生成Menu,点击对应的Menu时计算对应Section的位置并设置其位置。
示例 1:http://www.outyear.co.uk/smint/, http://www.outyear.co.uk/smint/demo/
示例 2:http://manos.malihu.gr/page-scroll-to-id
2. 在页面中根据内容插入A标签,定义锚点,在页面加载时收集这些锚点并生成Menu,点击Menu时直接跳转到相应的锚点。
示例 1: http://sympies.com/pagescroll_jquery_menu/
示例 2:HPEMEA项目中的Author模块,主要代码摘录如下:
(function () {
if (window.SideAnchorMenu == undefined) {
window.SideAnchorMenu = function () {
this.isInited = false;
};
} SideAnchorMenu.prototype.init = function (showTop, forceInit) {
if (forceInit === false && this.isInited) return;
var anchorMenu;
if ($("#divSideAnchorMenu").size() == 0) {
if (showTop) {
anchorMenu = $("<div><img src='/Modules/Aximpro.DotNetValue.Anchor/Content/Images/axLogo.png' alt='axLogo' id='axlogo' /><br/><hr id='logo-separator'><br/></div><div><ul><li><a href='#'><span></span><div>Top</div></a></li></ul></div>");
}
else {
anchorMenu = $("<div><img src='/Modules/Aximpro.DotNetValue.Anchor/Content/Images/axLogo.png' alt='axLogo' id='axlogo'/><hr id='logo-separator'></div><div><ul></ul></div>");
}
anchorMenu.attr("id", "divSideAnchorMenu");
$("body").append(anchorMenu);
} else {
anchorMenu = $("#divSideAnchorMenu");
anchorMenu.find("ul").empty();
}
var $ul = anchorMenu.find("ul");
var eventHandler = {
anchorMenuItemClick: function () {
$ul.find("li").removeClass("active");
$(this).addClass("active");
},
windowScollHandler: function () {
$ul.find("li").removeClass("active");
var windowScrollTop = $(this).scrollTop();
var windowHeight = $(window).height();
var forcedLi;
$(".anchorMark").each(function () {
var anchorOffsetTop = $(this).offset().top;
if (anchorOffsetTop <= windowScrollTop + windowHeight/3) {
forcedLi = $ul.find("a[href='#" + $(this).attr("id") + "']").parent();
var bgImage = document.body.style.backgroundImage
if (document.body.style.backgroundImage.toString().indexOf($(this).attr("id") + ".jpg", 0) == -1) { document.body.style.background = "url(/Skins/Single_Page/1.0/backgrounds/" + $(this).attr("id") + ".jpg) no-repeat center center fixed";
document.body.style.backgroundSize = "cover";
}
}
}); if (forcedLi) {
forcedLi.addClass("active");
} else {
$ul.find("a[href='#']").parent().addClass("active");
}
}
}; $(".anchorMark").each(function (i, item) {
var $item = $(item);
var anchor = $("<a><span></span><div></div></a>");
anchor.attr("href", "#" + $item.attr("id"));
anchor.attr("class", 'anchor-item');
anchor.find("div").text($item.attr("title"));
var $li = $("<li></li>");
$li.append(anchor);
$ul.append($li);
$li.click(eventHandler.anchorMenuItemClick);
});
//$ul.pagescroll_menu({ "position": "right", "fontfamily": "Forum" }); $(window).scroll(eventHandler.windowScollHandler);
this.isInited = true;
};
<!--//--><![CDATA[//><!--
$(document).ready(function () { $('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 150 }, 800); return false;
}
}
}); if (window.SideAnchorMenuInstance == undefined) {
window.SideAnchorMenuInstance = new window.SideAnchorMenu();
window.SideAnchorMenuInstance.init(false);
}
});
//--><!]]>
})();
Page Scroll Menu (页面中锚点菜单)的更多相关文章
- 回发或回调参数无效。在配置中使用 pages enableEventValidation=true 或在页面中使用 %@ Page EnableEventValidation=true % 启用了事件验证
WebForm中回发或回调参数无效问题的解决 解决 .NET中回发或回调参数无效问题的解 该错误的详细提示信息为: 回发或回调参数无效.在配置中使用 <pages enableEventVali ...
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- 从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中
1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...
- 回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。
问题补充: “/Source”应用程序中的服务器错误. 回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或 ...
- Jsp页面中常见的page指令
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6513327323628962312/ 1.<JSP页面实际上就是Servlet> 2.<JSP页 ...
- 前端开发css实战:使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- jsp页面中引用其他页面的方法
初看这个标题....大家的感觉一定是好2啊.....博主一定要说jsp的动态引用(jsp:include)和静态引用(@include)了.介绍这两者区别的文章已经烂大街了..一搜一大把..博主竟然还 ...
- HTML页面中常见的一些小方法
在<Head>标签中加 <meta http-equiv="pragma " content="no-cache"> <met ...
- JQuery 根据ID在页面中定位
1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...
随机推荐
- gitlab的搭建和linux客户端的连接
一.安装 1.新建 /etc/yum.repos.d/gitlab-ce.repo,添加以下内容 1 2 3 4 5 6 7 [gitlab-ce] name=gitlab-ce baseurl=ht ...
- Android eclipse中程序调试
一:断点调试 用eclipse开发android程序的时,跟VS一样是可以断点单步调试的.步骤如下.1 设置断点:在编码窗体的左边框上用鼠标双击,或者右键点击菜单,选择 Toggle Breakpoi ...
- Oracle —— 表结构相关的SQL
1.表基本信息(Table) select * from user_tables t, user_tab_comments c where c.table_name = t.table_name an ...
- 安装hma master出错 Error: Package: perl-Mail-Sender-0.8.13-2.el5.1.noarch
You are using the EPEL 5 version of the repo instead of 6, go into your /etc/yum.repos.d/epel.repo f ...
- hdu4760Good Firewall
4760 数组模拟就可以了 读的时候可以整数读入 #include <iostream> #include<cstdio> #include<cstring> #i ...
- ASP.NET26 个常用性能优化方法
数据库访问性能优化 数据库的连接和关闭 访问数据库资源需要创建连接.打开连接和关闭连接几个操作.这些过程需要多次与数据库交换信息以通过身份验证,比较耗费服务器资源. ASP.NET中提供了连接池(Co ...
- Machine Learning for hackers读书笔记(十二)模型比较
library('ggplot2')df <- read.csv('G:\\dataguru\\ML_for_Hackers\\ML_for_Hackers-master\\12-Model_C ...
- 如何使用USB安装XenServer 6.x
在XenServer 5.6以前我们能够很容易的通过一些工具,直接制作USB安装介质,然后快速安装XenServer,但是我们发现,到XenServer6.0以后,通过工具直接制作的XenServer ...
- HDU 5038 Grade
解题思路:这题最关键的是要读懂题意,If not all the value are the same but the frequencies of them are the same, there ...
- 剑指offer—第三章高质量代码(o(1)时间删除链表节点)
题目:给定单向链表的头指针和一个节点指针,定义一个函数在O(1)时间删除该节点,链表节点与函数的定义如下:struct ListNode{int m_nValue;ListNode* m_pValue ...