Question

我找到了这个脚本（我不明白）：

function scrollTo(c,e,d){d||(d=easeInOutQuart);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeInOutQuart(t) {
    return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t
}

但它完全适用于我尝试滚动到顶部：

document.getElementById('toTop').onclick = function() {
    scrollTo(0, 2500, easeInOutQuart);
}

DEMO THERE

嗯，有人可以帮助我纠正下面不起作用的剧本：

var  elements = document.querySelectorAll('.nav li a'),
     target;
for (var i = 0; i < elements.length; i++) {
     var element = elements[i];
     element.addEventListener('click', function(e) {
          target = this.getAttribute('href');
          console.log(target);
          scrollTo(target, 2500, easeInOutQuart);
     });
}

ATTEMPT LINK NAV

目标是正确的，所以我不知道它为什么不起作用......

谢谢！

Answer 1

应该传递给scrollTo函数的第一个参数是数字而不是DOM元素。您可能需要考虑使用一些更简单的东西，例如按照此处的建议在页面上锚定标记：How to scroll HTML page to given anchor?

这是我最喜欢的建议：

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

注意这确实使用了jQuery

Answer 2

我建议更改span，如下所示：

<span id="toTop" onclick="myFunction();"><i class="fa fa-angle-up" aria-hidden="true"></i></span>

仅为 onclick 添加事件处理程序，并调用以下JavaScript函数以获得效果：

function myFunction() {
    $('html, body').animate({scrollTop:0}, 'slow');
    return false;
}

在我的示例中，我使用的是jQuery，因为它更容易实现：Link to example

如何应用这种宽松过渡？没有jQuery

2 个答案: