Question

我正在使用页内链接锚点来平滑向下滚动页面。一切都很好，每个链接都悬停在合适的图像上。但是，我希望活动部分具有不同的图像以向用户显示它们的位置。我似乎无法使用任何东西。

这是我的HTML

<div id="scrollnav">
<ul>
    <li class="scrolldot"><span><a href="#one">1</a></span></li>
    <li class="scrolldot"><span><a href="#two">2</a></span></li>
    <li class="scrolldot"><span><a href="#three">3</a></span></li>
    <li class="scrolldot"><span><a href="#four">4</a></span></li>
    <li class="scrolldot"><span><a href="#five">5</a></span></li>
    <li class="scrolldot"><span><a href="#six">6</a></span></li>
</ul>
</div>

这是我的CSS

#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }

这是我要滚动到的部分的一个例子，希望活动。

<section id="one">
<div id="mainimagewrapper">
    <div class="image1">
        <div class="image2">
            <div class="970content">
                <div id="textdiv">
                    <h1>This is headline.</h1>
                    <p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
                </div>                  
            </div>
        </div>
    </div>
</div>
</section>

Answer 1

/ * ORDER定义锚伪类* /

a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}

这样，您可以为锚点上的浏览器默认操作定义样式。

之后，您可能需要使用javascript触发一些行为（如果浏览器由于超链接中的#hash而导致行为异常）。

使用jQuery操作添加一些风味，例如 .my-active 切换onClick将无法帮助您重新加载页面。您必须从超链接中推断出#hash，然后将其视为您的样式。

只需使用jQuery hashchange从超链接获取#hash，然后在范围内的元素上触发一个类。

否则，如果你只是需要一个插件来滚动打开的页面中的某个地方：http://demos.flesler.com/jquery/scrollTo/或者学习jquery-joyride-feature-tour-plugin。

继续

Answer 2

我认为在不编写自己的jQuery脚本的情况下，最简单的方法是查看Twitter Bootstrap的“Scrollspy”插件。我相信它只需很少的配置即可提供您所需要的效果。

链接：http://twitter.github.com/bootstrap/javascript.html#scrollspy

激活时更改页内锚点链接背景图像

2 个答案: