Page Scroll Menu (页面中锚点菜单)

Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长

 

当页面太长时，会导致浏览不便，这时就需要一个页面锚点菜单（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);
        }
    });
    //--><!]]>
})();