js动画函数滚动到div的底部而不是顶部

Posted 2023-05-08

【中文标题】js动画函数滚动到div的底部而不是顶部

【英文标题】：js animate function scrolls to bottom of div instead of top

【发布时间】：2017-05-04 14:50:55

【问题描述】：

js windows 将滚动顶部动画到 div 类正在向右滚动到 div 的底部

js

$(document).ready(function ()  
   $('html, body').animate(
     scrollTop: $('.tariff').offset().top
   , 'slow');
);

它正在向右滚动到 div 类“关税”的底部。我希望它滚动并停在 div 的顶部。

做了很多谷歌搜索。不知道我哪里错了。

编辑

我认为这可能与我的外部 js.js 文件有关。这里的某些东西可能会影响动画滚动高度。因为如果我省略这个文件， 它会正确滚动到 div 的顶部。

但我不知道这里有什么干扰。

js.js

    $('document').ready(function()
    $('#smshare').click(function() 
        $('#smp').slideToggle('fast');
        $('#smp').load('social-media-share.php');
    );

    $('#offer,#orderlink').click(function()
    
        $('#order').fadeIn('fast');
        $('html, body').animate(
        scrollTop: $("#order").offset().top
        , 2000);
    $('.scrolltop').fadeIn('fast');
    $('.aboutus,.tariff,.services,.contactus,.logged_order,.pers_dets,.clothes_submitted,.locations_list').fadeOut('fast');
    );

    $('.scrolltop').click(function()
        $('#order').fadeOut('fast');
            $('html, body').animate(
            scrollTop: $(".header").offset().top
        , 2000);
            $('.scrolltop').fadeOut('fast');
    );

    $('#svl').click(function()
    
    $('html, body').animate(
        scrollTop: $(".service_locations").offset().top
        , 2000);
    );

    $('.more1').click(function() 
        $('.more_dry_cleaning').slideToggle('fast');
    $('.more1').fadeOut('fast');
    );


    $('.less1').click(function() 
        $('.more_dry_cleaning').fadeOut('fast');
        $('.more1').fadeIn('fast');
    );


    var valid=0;
           $('form[name=orderform]').submit(function(e)  
//                alert('Got you!');
            $('.clothesqty').each(function()
//                alert('Got you!');
                        if($(this).val() != 0) valid+=1;
                    );

            if(valid!=0)
//                       e.preventDefault();
    //                  alert(valid + " inputs have been filled");
                        return true;
            
            else 
                         e.preventDefault();
                        //alert('Houston we have contact!');
                        alert("error: you must fill in at least one field");
                        return false;
                    
           );

                var oblen=Object.keys(item).length;
        var zero=0;

        var cloth = "";
        var i;
        var it=1;
        var totitems=0;
        var tot=0;
        var totcost=0;
        var itemid="";
        var itemclass="";
        var totval=0;

    for (var key in item) 
        if (!item.hasOwnProperty(key)) 
        //The current property is not a direct property of p
        continue;
        
         var k=key;
         var v=item[key];

//       alert(v);
            cloth = k.replace(/ |-|&|\//g, '').toLowerCase();
             itemid="#" + cloth;
             itemclass="#" + cloth + "cost";
//           alert(v+"/"+itemid);

             $(itemid).keyup((function (id, cls,itm,val) 
                return function () 
                var x = $(id).val();
                if(x!=0)
                itemtot=x * val;
//              alert(itm+"->"+itemtot + "=" + x + "x" + val);
                $(cls).css("background-color", "#446666").css("padding","3px").css("color","white").css("width","60px").html("Rs." + itemtot);
                else
                $(cls).css("background-color", "#446666").css("padding","3px").css("color","white").css("width","60px").html("Rs." + zero);
                    

                

           (itemid, itemclass,cloth,v)));
    
        $("input").each(function() 
                    $(this).keyup(function()
            //          calculateCost();
                        calculateSum();
                    );
                );
); 

//Totals
function calculateSum() 
        var sum = 0;
        var totcost=0;
        //iterate through each textboxes and add the values
        $("input").each(function() 
            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0 && this.value.length<=3) 
                sum += eval(parseInt(this.value));
            
        );

        $("div.ittot").each(function() 
            var tots=0;
            var str=$(this).text();
            var thenum = str.replace( /^\D+/g, '');
            var tots = parseInt(thenum,10);
            //add only if the value is number
            //if(!isNaN(tots) && tots.length!=0) 
            totcost += tots;
            //
        );
//      alert(totcost);
    $("#totalcost").css("background-color", "green").html("<div style='float:left;margin-left:5px'><span style='font-weight:700'>Total Cost : </span>Rs."+ totcost + "</div><div style='float:right;margin-right:5px'><span style='font-weight:700'>Total Items : </span>" + sum + "</div><div style='clear:both'></div>");


//slider2
var myPicIndex = 0;
picCarousel();

function picCarousel() 
    var i;
    var x = getElementsByClassName("myPicSlides");

    for (i = 0; i < x.length; i++) 
       x[i].style.display = "none";
    
    myPicIndex++;
    if (myPicIndex > x.length) myPicIndex = 1
    x[myPicIndex-1].style.display = "block";
    setTimeout(picCarousel, 3000); // Change image every 2 seconds


function getElementsByClassName(className) 
    var found = [];
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) 
        var names = elements[i].className.split(' ');
        for (var j = 0; j < names.length; j++) 
            if (names[j] == className) found.push(elements[i]);
        
    
    return found;


//slider1

var myIndex = 0;
carousel();

function carousel() 
    var i;
    var x = getElementsByClassName("mySlides");

    for (i = 0; i < x.length; i++) 
       x[i].style.display = "none";
    
    myIndex++;
    if (myIndex > x.length) myIndex = 1
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // Change image every 2 seconds


function getElementsByClassName(className) 
    var found = [];
    var elements = document.getElementsByTagName("*");
    for (var i = 0; i < elements.length; i++) 
        var names = elements[i].className.split(' ');
        for (var j = 0; j < names.length; j++) 
            if (names[j] == className) found.push(elements[i]);
        
    
    return found;

编辑 2

我已将问题进一步缩小到似乎有问题的 slider2 JS 函数。因为如果我删除了我放在slider2.php文件中的滑块html并将其包含在关税.php文件中，那么滚动就会正常运行。

slider2.php

<div style="width:100%;margin:0 auto">
    <img class="myPicSlides" src="images/header/clothes-drying-on-line-iv.jpg" >
    <img class="myPicSlides" src="images/header/new/shirts-on-line-iv.jpg" >
    <img class="myPicSlides" src="images/header/iron-and-clothes-iv.jpg" >
    <img class="myPicSlides" src="images/header/woollens-iv.jpg" >
    <img class="myPicSlides" src="images/header/shirts-on-hanger-iv.jpg" >
</div>

编辑 3

我相信动画功能正在考虑滑块中图像的高度并将它们相加！如何解决？

【参考方案1】：

如果你想到达窗口的顶部，请使用这个：

$("html, body").animate(
                    scrollTop: 0
               , 500);

$('.tariff').offset().top 给出 body 顶部和 div 顶部之间的位置距离，类为“tariff”。 因此，它在滚动时会覆盖那么远的距离。

请像这样尝试。

【讨论】：

谢谢@Nitesh，但是我在哪里指定类“关税”来定位那个 div？

因为如果你观察我的问题，我想滚动到 div 的顶部而不是窗口

@user3526204：好的，我之前没有收到问题。你能检查一下这个小提琴吗？可能你想要一样吗？ jsfiddle.net/55wv758y

不是点击功能。我正在查看页面加载时的自动滚动。我试过你的小提琴代码宽度输出点击事件，但这也不起作用。我已经编辑了我的问题以获取更多信息。请看。

【参考方案2】：

使用此代码。

$(document).ready(function ()  
   $('html, body').animate(
     scrollTop: $('.tariff').offset().top + $('.tariff').height()
   , 'slow');
);

【讨论】：

还是一样的结果，切坦。顺便说一句，这应该如何使滚动停止在 div 的顶部？它不会进一步增加高度吗？

【参考方案3】：

检查它在那里为我工作的小提琴。让我知道这是否有帮助。

$("#scroll").click(function(e) $('html, body').animate( scrollTop: $('.tariff').offset().top , 'slow'); );

Fiddle

【讨论】：

这里没有点击事件，Nkt，它必须在页面加载时滚动

然后你可以删除它应该工作的点击事件。否则分享您的代码，我们可以提供帮助。

成功了吗？您是否有多个 .tariff 元素？

不工作。实时页面在这里mylaundrywala.com/tariff。您可以查看源代码。我使用上面相同的代码，没有点击事件。

也发生在所有页面上

【参考方案4】：

由于我意识到滑块中图像的高度是由 html 一个一个地排列在另一个之下，而不是在调用 javascript 时一个一个地淡入和淡出（它有一个分数延迟），所以animate 函数注册页面高度，包括图像的所有高度！并且考虑到这些高度的卷轴。这就是为什么它一直向下滚动到底部。而不是 div 的顶部。

虽然我无法找到真正问题的 js 解决方案，但我设法找到了解决方法。

最后，我所做的是通过使用“加载”功能来延迟滑块图像的加载。并在那里放置一张静态图像直到滑块加载，然后在滑块图像加载后淡出静态图像。

在此期间，animate 函数仅获取该静态图像的高度，这实际上是所有图像加载后 div 应具有的高度。

现在动画滚动功能正在滚动到相关 div 的顶部。

感谢大家的帮助

【参考方案5】：

原版方式

var el = document.getElementById('myelement');
el.scrollTop = el.scrollHeight;