单击滚动到锚点

Question

我试图让网站滚动到锚点而不跳跃。该网站为www.nicbrwn.com/vision。

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

Answer 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;
}

JS

$('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/