javascript - jQuery 当前位置和滚动位置之间的区别

Question

我正在尝试获取元素与顶部的当前距离与其滚动后的下一个位置之间的差异。事实上，我正在尝试根据距离选择动画持续时间。我写了下面的代码，但它不能正常工作-

我有 6 菜单项，当我点击每个菜单项时，窗口会滚动到它的位置。但问题是，当我点击最后一个项目时，它应该在 2 秒 内移动超过 3000px，我想通过获取距离来增加时间。不幸的是，当我添加 if - else if 部分时，某些项目不起作用。我的意思是点击它们后没有任何反应。

var w = window.innerWidth
 || document.documentElement.clientWidth
 || document.body.clientWidth;

 var h = window.innerHeight
 || document.documentElement.clientHeight
 || document.body.clientHeight;


var scrolingMenuTime=1500;
var hashTagActive = "";
    $(".item, .item-f").click(function (ev) {
        if(hashTagActive != this.hash) {
            ev.preventDefault();
            var next = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                next = $(document).height() - $(window).height();
            } else {
                next = $(this.hash).offset().top;
            }
            var currentPosition=$(this).offset().top;
            var diffPos=Math.abs(next-currentPosition);

        if (diffPos >= h && diffPos < 2*h){
            scrolingMenuTime=1700;
        }else if(diffPos >= 2*h && diffPos < 3*h){
            scrolingMenuTime=2500;
        }else if(diffPost >= 3*h && diffPos < 4*h){
            scrolingMenuTime=3500;
        }else if(diffPos >= 4*h && diffPos < 5*h){
            scrolingMenuTime=4500;
        }else if(diffPos >= 5*h){
            scrolingMenuTime=5500;}
        else{
                return false;
            }
        $('html,body').animate({
            scrollTop: next
        }, scrolingMenuTime, 'easeOutBack');
        hashTagActive = this.hash;
        location.hash = '';
    }
});

而且我还必须说明，当我删除 if - else if 部分时，代码可以正常工作。 if - else if 部分有什么问题？

Answer 1

你基本上需要有某种因素来将它的值乘以某个特定的垂直值，即:有 6 个链接和大约 3000 像素的文档高度意味着你需要使当前位置和目标位置之间的距离更大也就是说，这个因素越大，远距离的动画周期就越长。

喜欢这个JS Fiddle

我的解决方案是，如果您在激活链接点 (2) 的“第二部分”，如果您点击 (3) 定位“第三部分” ，动画持续时间将为 Math.abs(2 - 3) * 250 因此滚动将持续 250ms.

如果您在“第二部分”(2) 并单击链接 (5) 将页面滚动到“第五部分”，则公式将是 Math.abs(2 - 5) * 250，这会导致 750ms 动画持续时间。

此解决方案自动化且代码少得多，这与您需要为每个新部分添加新条件的 if-else if 语句不同。即使您的部分高度变化很大，您也可以使用 javascript 获取每个部分的高度并编写您自己的类似公式。

JS:

// initializing 
var prevLinkId = 0,
    body = $('html, body');

/* some code */

// get the numeric part of the linkId of the anchor that just been clicked
// remove the active .highlight class name from all links
// and assign it to the just clicked link
linkId = $(this).attr('id');
linkId = linkId.replace('lnk', '');
links.removeClass('highlight');
$(links[linkId]).addClass('highlight');

// compute the absolute differet between the previous link value and the new one
// to have a variable factor when multiplied by the step "here 250ms" we get
// longer durations for larger distances, then we perform the scrolling
// below is the part responsible for making flexible durations
diff = Math.abs(linkId - prevLinkId);
timeDelay = diff * 250;
distance = index * secHeight;
body.animate({scrollTop: distance} , timeDelay);

//finally set the just clicked link as previous link for future calculations
prevLinkId = linkId;