单击时滚动到锚点

【问题标题】：On click scroll to anchor point单击时滚动到锚点
【发布时间】：2013-11-13 12:25:52
【问题描述】：

我正在尝试让网站滚动到锚点而不跳转。网址是www.nicbrwn.com/vision。

任何帮助将不胜感激。我在这里试过这个例子：http://css-tricks.com/snippets/jquery/smooth-scrolling/ 但它仍然只是跳跃。

【问题讨论】：

你用什么代码来滚动？
你的努力在哪里？另外你的网站没有JS
您可以使用fullPage.js 插件快速完成。如果您不想要自动滚动，您可以在选项中禁用它。

标签： jquery html css scroll

【解决方案1】：

给你

html

<a href="#red">red</a>  <a href="#blue">blue</a>
<div class="section red" id="red"></div>
<div class="section blue" id="blue"></div>

CSS

.section {
height:550px;
}
.red {
background-color:#F00;
}
.blue {
background-color:#036;
}

$('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
        }, 1000);
        return false;
    }
}
});

演示 http://jsfiddle.net/cancerian73/k2j5X/

【讨论】：