Question

js windows animate scrolltop to div class向右滚动到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

我进一步将问题缩小到了ski2 JS函数，这似乎是一个问题。因为如果我删除了我在slider2.php文件中放入的滑块html并将其包含在tariff.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

如果您想要到达窗口顶部，请使用：

sendfile

$（'。tariff'）。offset（）。top给出了身体顶部和div顶部之间的位置距离与类“关税”。因此，它在滚动时覆盖了很长的距离。

请尝试这样。

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函数注册页面高度，包括图像的所有高度！和卷轴保持这些高度考虑。这就是它向下滚动到底部的原因。而不是顶部的。

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

最后，我所做的是通过使用＆＃39; load＆＃39;来延迟滑块图像的加载。功能。然后在那里放置一个静态图像，直到加载滑块，然后在加载滑块图像后将静态图像淡出。

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

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

感谢所有人的帮助

Answer 5

香草方式

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

js动画功能滚动到div的底部而不是顶部

5 个答案: