简单的“滚动到/向下"使用最少的标记和哈希标签的效果 [英] Simple "scroll to/down" effect using minimal markup and hash tags

问题描述

我正在制作一个页面页面，该页面的顶部具有经典导航.现在，我已将链接设置为哈希标签，以便在页面中导航:

I am making a one page site that has a classic navigation at the top. Right now I have links set up as hash tags in order to navigate within the page:

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

很明显，这是可行的，但是跳转到关于"部分是即时的而不是渐进的.我正在寻找一种非常简单的实现方式以便逐步过渡.我不要花哨的东西.没有轴，偏移量或任何其他选项.我只希望滚动过渡是逐步的.我想要的唯一设置是完成滚动所花费的时间.另外，我几乎不希望更改标记.我见过几个JavaScript插件，它们要求您使用定位标记来设置html文档中的位置-我不希望那样. 此网站看起来很有希望，但我不知道如何设置.没有演示，所以我看不到如何设置它.我不太懂Java语言.另外，用于jQuery的 ScrollTo插件太复杂了.我愿意使用具有很多选项的插件，但我只是不想让这些选项阻止我弄清楚如何设置它.

Obviously, this works but the jump to the about section is instant and not gradual. I am looking for an extremely simple implementation in order to make a gradual transition. I don't want anything fancy. No axis, offset, or any other options. I just want the scroll transition to be gradual. The only setting I want is the time it takes to finish the scroll. Also, I want to make almost no changes to my markup. I have seen several javascript plugins that require you to use anchor tags to set the locations in the html document— i don't want that. This site looks promising, but I don't know how to set it up. There is no demo so I can't see how to set it up. I am not that literate in Javascript. Also, the ScrollTo plugin for jQuery is way too complicated. I am willing to use a plugin that has a lot of options, but I just don't want the options to prevent me from figuring out how to set it up.

任何帮助将不胜感激！

推荐答案

这是我发现的最好方法-它仅使用普通锚，但扩展了其功能

This is the best way I have found to do it - it just uses the normal anchors but extends their functionality

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

这是一个实时示例

这篇关于简单的“滚动到/向下"使用最少的标记和哈希标签的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！