Question

我正在制作一个单页网站，顶部有经典导航。现在我将链接设置为哈希标记，以便在页面中导航：

<nav>
<a href="#about">About</a>
</nav>
...
<section id="about">...</section>

显然，这是有效的，但跳转到about部分是即时的而不是渐进的。我正在寻找一个非常简单的实现，以便逐步过渡。我不想要任何幻想。没有轴，偏移或任何其他选项。我只是希望滚动过渡是渐进的。我想要的唯一设置是完成滚动所需的时间。另外，我想对我的标记几乎没有任何更改。我看过几个javascript插件，要求你使用锚标签来设置html文档中的位置 - 我不希望这样。 This site看起来很有希望，但我不知道如何设置它。没有演示，所以我看不到如何设置它。我在Javascript中不是那么有文化。此外，jQuery的ScrollTo plugin太复杂了。我愿意使用一个有很多选项的插件，但我不想让这些选项阻止我弄清楚如何设置它。

非常感谢任何帮助！

Answer 1

这是我发现的最佳方式 - 它只使用普通的锚点，但扩展了它们的功能

$('a').click(function() {
    var elementClicked = $(this).attr("href");
    var destination = $(elementClicked).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-15}, 500);
});

这是live example

Answer 2

我使用直接jquery来做这件事。

我有一个像这样的链接 - ＆gt;

<a href="1" class="scrolling">Go to 1</a>

然后使用jquery它将向下滚动到另一个具有id为“1”的锚点的div

$("a.scrolling").click(function(e) {
    e.preventDefault();
    goToByScroll($(this).attr("href"));
});

function goToByScroll(id) {
    $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');                               
}

Answer 3

Javascript中有ScrollTo。这是一个窗口事件。看看这里： https://developer.mozilla.org/en/DOM/window.scrollTo

Answer 4

我在网上找到了这个代码，同时搜索了一种快速创建滚动效果的方法。

html代码：

<a href="#services">Jump to services</a>
<div id="services"></div>

jQuery代码：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

}）;

这是Code source。

使用最小标记和哈希标记简单地“滚动到/向下”效果

4 个答案: