javascript不会滚动到页面上的元素

Question

我的页面上有一个div，我想在点击导航栏中的链接后向上滚动。

我为此编写了以下JavaScript，但它无效。

<script>
    var currentpos = 0;
    function movedown(element){
        window.scrollBy(0,element.offsetHeight);
        delay = window.setInterval('movedown();',100);
        currentpos+=1;
        if(currentpos == element.offsetheight){
            stopscroll();
        }
    }
    function stopscroll(){
         window.clearInterval(delay);
    }
</script>

Answer 1

HTML

正如@ andrewlorente评论中所述，如果您只是希望它跳转到页面上的元素，您可以使用锚链接。

<a href="#targetElement">See more</a>

缺点是它不会滚动 - 它会跳跃。它可以被迫用JS滚动。这是一个很好的方法，允许用户轻松地书签到页面上的某些部分。

---

JQUERY

如果你愿意使用jQuery，这是一个我用了很多功能来实现你想要的滚动。

它使用jQuery's ScrollTop method将其传递到animate() method。 animate()的最后一个参数是easing。您可以传入不同的字符串以获得不同的效果。您可以查看部分different easing options。

/*
 * A scrollTo function that gets passed an ID & an optional offset
 *
 * @param {string}  location ('#resultsTop')
 * @param {integer} offset   (-100)
 */
function scrollTo(location, offset) {
    $("html, body").animate({scrollTop: ($(location).offset().top + (offset || 0) )}, "slow");
    return false;
};