0

我已经搜索并看到了很多关于这个主题的例子，但我找不到最适合我的方法。

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

    <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插件。

  1. 我需要知道链接的点击方法的完整语法（它们都有相同的类）
  2. 我应该从链接中删除 href park 吗？

等待您的帮助并仍在搜索中

编辑！！！：在这种情况下，我只需要一堂课。是否可以为多个类提供此属性？

    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 (), 我怎么能在这里插入另一个类或者我应该写：

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

4 回答 4

3

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));
});
于 2013-09-02T14:07:45.933 回答
1

我注意到，通过 JohnJohnGa 的回答，您会得到一个“闪烁”（至少对于 Google Chrome），页面会立即弹出到锚点 href 位置，然后在平滑滚动之前再次返回。这对于一台快速的计算机可能并不明显，但在我正在使用的那台计算机上绝对是显而易见的。为了解决这个问题，我做了以下事情：

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
    window.history.pushState(null, null, $($anchor.attr('href')).selector);
});

请注意，这会阻止默认事件触发，然后用于window.history.pushState模仿它。对于不支持 pushState的旧浏览器，它会滚动到正确的位置，但不会更新地址位置。

于 2015-08-01T01:21:06.133 回答
1

也可以使用样式表中的以下内容在纯 CSS 中完成。

html{
   scroll-behavior: smooth
}
于 2022-02-11T00:35:24.577 回答
-1

现场演示：http: //jsfiddle.net/wVEAy/2/

请注意，对于这种情况，您需要一个与链接标签中id指定的元素相同的元素：href

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

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
于 2013-09-02T14:20:52.380 回答