js Funktion scrollt nach unten von div statt oben

Question

js Fenster animieren scrollTop zu div class scrollt Recht auf auf dem Boden des div

js

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

es rollt rechts nach unten animieren von div-klasse "tarif". Ich möchte, dass es scrollt und an der Spitze des Divs stoppt.

Hat viel googeln. Ich weiß nicht, wo ich falsch liege.

EDIT

denke ich, es hat etwas mit meiner externen js.js Datei zu tun haben. Etwas bewirkt hier wahrscheinlich die animierte Scrollhöhe. Denn wenn ich diese Datei weglasse, scrollt richtig an die Spitze des div.

Aber ich weiß nicht, was hier interferiert.

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

EDIT 2

Ich habe das Problem weiter auf die Slider2 JS-Funktionen, die ein Problem zu sein scheinen verengt. Denn wenn ich den Slider html entferne, den ich in eine slider2.php Datei gelegt habe und in die tarif.php Datei einfüge, dann verhält sich der Scroll korrekt.

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> 

EDIT 3

Ich glaube, die belebte Funktion die Höhen der Bilder in dem Schieber in Betracht nimmt und das Hinzufügen von ihnen! Wie löst man das?

Answer 1

Wenn Sie an die Spitze des Fensters erreichen möchten, können Sie diese verwenden..

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

$ ('Tarif') versetzt() oben gibt Positionsabstand zwischen Oberseite des Körpers und Top-div mit Klasse "Tarif". Als Ergebnis deckt es so viel Abstand beim Scrollen ab.

Bitte versuchen Sie es so.

Answer 2

Verwenden Sie diesen Code.

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

Answer 3

Überprüfen Sie die Geige, die es für mich dort arbeitet. Lassen Sie mich wissen, ob das hilft.

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

Fiddle

Answer 4

Da erkannte ich, dass es die Höhe der Bilder in dem Schieber war, die eher durch html untereinander gelegt wurde, als durch eine in und aus einem Verblassen, wenn Sie Javascript aufgerufen wird (die eine fraktionierte Verzögerung hat), registriert die animierte Funktion die Seitenhöhe einschließlich aller Höhen der Bilder! Und Schriftrollen, die diese Höhen berücksichtigen.Deshalb scrollte es bis auf den Grund. Statt Spitze des div.

Obwohl ich nicht in der Lage war, eine js-Lösung für das eigentliche Problem zu finden, gelang es mir, eine Arbeit zu finden.

Schließlich war, was ich tat, um die Slider Bilder Laden mit Hilfe der Funktion "Laden" zu verzögern. Und legte ein statisches Bild dort, bis der Slider geladen war, und verblasste dann das statische Bild nach dem Laden der Sliderbilder.

Während dieser Zeit nimmt die Animate-Funktion nur die Höhe dieses einen statischen Bildes auf, die tatsächlich die Höhe ist, die div haben sollte, nachdem alle Bilder geladen wurden.

Jetzt scrollt die animierte Bildlauffunktion an den Anfang des relevanten div.

Vielen Dank für Ihre Bemühungen zu helfen