平滑滚动到内部链接的最佳方法 [英] Best way to smooth scrolling to an internal link

问题描述

我已经搜索并看到了许多与此主题相关的示例，但我不是最好的选择.

I've searched and see lots of examples about this subject but I couldn't best way for me.

我对JS和jQuery有点熟悉，我想问一下平滑滚动.

I'm just a bit familiar with JS and jQuery and I want to ask about smooth scrolling.

    <a name="urunler"></a>
<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    <li><a href="#ipanjur" class="uruna">Alüminyum (İthal / Yalıtımlı) Panjur</a></li>
    <li><a href="#opanjur" class="uruna">Otomatik Panjur</a></li>
    </ul>

我有这样的导航.这将滚动滚动.但是我要慢慢做.最短的&最简单的方法呢?我对JS比较熟悉，并且不想下载和使用JS插件.

I've a navigation like this. This scrolls instatly. But I want to do it slowly. Which is the shortest & easiest way for this? I'm more familiar to JS and I don't want to download and use JS plugins.

1. 我需要了解链接的click方法的完整语法(它们都具有相同的类)
2. 我应该从链接中删除href公园吗?

等待您的帮助&仍在搜索

Waiting for your help & still searching

编辑！！！:在这种情况下，我只需要上一堂课.可以为多个类提供此属性吗?

EDIT!!!: In this situation, I need only one class. Is it possible to give this property for multiple classes?

    function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});

我有('click'，'a.uruna'，function()，如何在这里插入另一个类，或者我应该写:

I've got ('click', 'a.uruna', function (), how can I insert another class here or should I just write:

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
    scrollToElement($(this).attr('href'));
});

推荐答案

HTML:

<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    [...]
</ul>

JS:

function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this).attr('href'));
});

或

function scrollToElement (obj) {
  $('html, body').animate({
    scrollTop: obj.offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this));
});

这篇关于平滑滚动到内部链接的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！