Question

我正试图在滚动后从顶部到下一个位置的当前距离之间得到区别。事实上，我正在尝试根据距离选择动画持续时间。我在下面编写了代码，但它无法正常工作 -

我有 6 菜单项，当我点击每个菜单项时，窗口滚动到它的位置。但问题是，当我点击最后一个项目时，它应该在 3000px 2秒中移动，我希望通过获取距离来增加时间。不幸的是，当我添加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个链接，大约3000px文档高度意味着你需要使它成为当前位置和目标位置之间的距离越大是的，这个因素越多，远距离的动画周期就越长。

就像这个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;

使用jQuery

1 个答案: