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

Question

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" alt="Laundry Clothes Drying">
    <img class="myPicSlides" src="images/header/new/shirts-on-line-iv.jpg" alt="Laundry Foam">
    <img class="myPicSlides" src="images/header/iron-and-clothes-iv.jpg" alt="Iron Clothes">
    <img class="myPicSlides" src="images/header/woollens-iv.jpg" alt="Woollens Laundry">
    <img class="myPicSlides" src="images/header/shirts-on-hanger-iv.jpg" alt="Laundry Shirts mylaundrywala">
</div>

编辑 3

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

Answer 1

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

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

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

请像这样尝试。

Answer 2

使用此代码。

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

Answer 3

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

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

Fiddle

Answer 4

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

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

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

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

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

感谢大家的帮助

Answer 5

原版方式

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