Question

我有一些问题。我有javascript函数滚动到选定元素与滚动aniamtion。这很好用，但问题是当我向上滑动/向下滑动（显示隐藏）某个元素时。

如果点击的链接有类.show我会显示部分。如果链接没有这个类，我使用.slideUp函数来隐藏这个元素。而这就产生了错误，因为现在衬里不精确（它是aniamtes到错误的地方）。它看起来像javascript考虑隐藏元素的高度并计算所有错误。我不知道如何解决这个问题。谢谢你的帮助。

var $root = $('html, body');
        $(document).on('click','.scroll-ani', function(event){
            if ($(this).hasClass('show')) {
                if ($('#about').is(':hidden')) {
                $('#about').slideDown();
                }
            } else {
                // if i replace slideUp with .hide() it will work well, but will not animate this slideUp effect.
                $('#about').slideUp();
            }
            var hash = this.hash;
            if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
                $root.animate({
                    scrollTop: $(hash).offset().top
                }, 'normal', function() {
                    location.hash = hash;
                });
                return false;
            }
        });

Answer 1

我会尝试两件事。而不是使用slideDown / Up，使用css更改高度，并为元素提供高度的css过渡。也可以使用此库来设置滚动动画：http://demos.flesler.com/jquery/scrollTo/。

也许问题是当你使用$ root.animate（...）滚动到元素时，slideDown动画没有完成，因此offset（）。top没有得到最终的正确值。手动设置css高度并结合过渡可以解决问题（我正在使用传统的js动画而不是css过渡）

动画滚动到#hash，页面上隐藏了元素

1 个答案: