Javascript js animate函数滚动到div的底部而不是顶部_Javascript_Jquery_Html_Scroll_Jquery Animate

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

javascript jquery html scroll

Javascript js animate函数滚动到div的底部而不是顶部,javascript,jquery,html,scroll,jquery-animate,Javascript,Jquery,Html,Scroll,Jquery Animate,js windows animate scrolltop to div类将向右滚动到div的底部 js 它正在向右滚动到div类“关税”的底部。我希望它滚动并停在div的顶部做了很多谷歌搜索。不知道我错在哪里编辑我想这可能与我的外部js.js文件有关。此处的某些内容可能会影响动画滚动高度。因为如果我省略了这个文件，它会正确地滚动到div的顶部但我不知道这里有什么干扰 js.js $（'document'）.ready（函数（）{ $（'#smshare'）。单击（函数（）{ $（'sm

js windows animate scrolltop to div类将向右滚动到div的底部

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

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

编辑

我想这可能与我的外部js.js文件有关。此处的某些内容可能会影响动画滚动高度。因为如果我省略了这个文件，它会正确地滚动到div的顶部

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

js.js

$（'document'）.ready（函数（）{
$（'#smshare'）。单击（函数（）{
$（'smp'）。滑动切换（'fast'）；
$（'#smp'）.load（'social-media-share.php'）；
});
$（'offer，#orderlink'）。单击（函数（）
{
$（'order'）.fadeIn（'fast'）；
$（'html，body'）。设置动画({
scrollTop:$（“#订单”）.offset（）.top
}, 2000);
$（'.scrolltop'）.fadeIn（'fast'）；
$（'.aboutus、.price、.services、.contactus、.logged\u order、.pers\u dets、.costs\u submitted、.locations\u list'）。淡出（'fast'）；
});
$（'.scrolltop'）。单击（函数（）{
$（'顺序'）.fadeOut（'快速'）；
$（'html，body'）。设置动画({
scrollTop:$（“.header”）.offset（）.top
}, 2000);
$（'.scrolltop'）.fadeOut（'fast'）；
});
$（'#svl'）。单击（函数（）
{
$（'html，body'）。设置动画({
scrollTop:$（“.service_位置”）.offset（）.top
}, 2000);
});
$（'.more1'）。单击（函数（）{
$（'more_dry_cleaning'）。滑动切换（'fast'）；
$（'.more1'）.fadeOut（'fast'）；
});
$（'.less1'）。单击（函数（）{
$（'more_-dry_-cleaning'）。淡出（'fast'）；
$（'.more1'）.fadeIn（'fast'）；
});
var valid=0；
$（'form[name=orderform]'）。提交（函数（e）{
//警惕（“抓住你了！”）；
$（'.CloseSqty'）。每个（函数（）{
//警惕（“抓住你了！”）；
如果（$（this.val（）！=0）{valid+=1；}
});
如果（有效！=0）{
//e.预防违约（）；
//警报（有效+“输入已填写”）；
返回true；
}
否则{
e、 预防默认值（）；
//警报（'休斯顿，我们有联系！'）；
警报（“错误：您必须至少填写一个字段”）；
返回false；
}
});
var oblen=Object.keys（item）.length；
var 0=0；
var=”；
var i；
var it=1；
var totitems=0；
var-tot=0；
var总成本=0；
var itemid=“”；
var itemclass=“”；
var-totval=0；
用于（var输入项）{
如果（！item.hasOwnProperty（键））{
//当前属性不是p的直接属性
继续；
}
var k=键；
var v=项目[关键]；
//警戒（五）；
cloth=k.replace（/|-|和| \//g'，）.toLowerCase（）；
itemid=“#”+布料；
itemclass=“#”+布料+成本”；
//警报（v+“/”+项目ID）；
$（itemid）.keyup（（函数（id、cls、itm、val）{
返回函数（）{
var x=$（id）.val（）；
如果（x！=0）{
itemtot=x*val；
//警报（itm+“->”+itemtot+“=”+x+“x”+val）；
$（cls）.css（“背景色”，“#446666”）.css（“填充”，“3px”）.css（“颜色”，“白色”）.css（“宽度”，“60px”）.html（“Rs.”+itemtot）；
}否则{
$（cls）.css（“背景色”，“#446666”）.css（“填充”，“3px”）.css（“颜色”，“白色”）.css（“宽度”，“60px”）.html（“Rs.”+零）；
}
}
}（itemid，itemclass，cloth，v））；
}
$（“输入”）。每个（函数（）{
$（this）.keyup（function（）{
//计算成本（）；
计算um（）；
});
});
}); 
//总数
函数calculateSum（）{
var总和=0；
var总成本=0；
//遍历每个文本框并添加值
$（“输入”）。每个（函数（）{
//仅当值为number时添加
如果（！isNaN（this.value）&&this.value.length！=0&&this.value.length x.length）{myPicIndex=1}
x[myPicIndex-1].style.display=“block”；
setTimeout（picCarousel，3000）；//每2秒更改一次图像
}
函数getElementsByClassName（类名称）{
发现的var=[]；
var elements=document.getElementsByTagName（“*”）；
对于（var i=0；ix.length）{myIndex=1}
x[myIndex-1].style.display=“block”；
setTimeout（carousel，3000）；//每2秒更改一次图像
}
函数getElementsByClassName（类名称）{
发现的var=[]；
var elements=document.getElementsByTagName（“*”）；
对于（var i=0；i


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



    $('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;
}

<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>

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

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