JS動畫功能，滾動到DIV，而不是頂部

JS的底部窗口動畫scrollTop的到DIV類向右滾動向div的底部JS動畫功能，滾動到DIV，而不是頂部

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

它向右滾動至底部的分類「關稅」。我希望它滾動並停止在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功能。因爲如果我刪除滑塊HTML，我已將其放在slider2.php文件中，並且包含在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

我相信動畫功能考慮到圖像的高度在滑塊和添加他們了！如何解決這個問題？

來源

2016-12-19 user3526204

如果你想達到窗口的頂部，請使用：。

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

$（「關稅」）偏移（）頂部給人的身體上和DIV的頂部之間的位置距離與類「關稅」。因此，滾動時它覆蓋了很多距離。

請嘗試這樣。

來源

2016-12-19 14:19:57 Nitesh

謝謝@Nitesh，但我在哪裏指定類'關稅'目標該div？ – user3526204

因爲如果你觀察我的問題，我想滾動到div頂部而不是窗口 – user3526204

@ user3526204：好的，我沒有得到問題。你能查看這個小提琴嗎？可能你想要一樣嗎？ https://jsfiddle.net/55wv758y/ – Nitesh

使用此代碼。

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

來源

2016-12-19 14:32:15

同樣的結果，Chetan。順便說一句，這應該如何使滾動停止在div的頂部？不會再增加高度嗎？ – user3526204

檢查它的小提琴它在爲我工作。讓我知道這是否有幫助。

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

Fiddle

來源

2016-12-19 14:40:37 nkt217

這裏沒有點擊事件，Nkt，它必須滾動頁面加載 – user3526204

然後你可以刪除它應該工作的點擊事件。否則分享你的代碼，我們可以提供幫助。 – nkt217

是否奏效？你有沒有多過一個'.tariff'元素？ – nkt217

由於我意識到，這是這是由HTML佈置一個在另一個之下在滑塊的圖像的高度，而不是由一個時的JavaScript淡入淡出一個被稱爲（它有一個分數延遲），動畫功能註冊頁面高度，包括圖像的所有高度！和卷軸保持這些高度的考慮。這就是爲什麼它是滾動到底部。而不是頂部的div。

雖然我無法找到真正的問題的JS解決方案，我設法找到解決辦法。

最後，我所做的是通過使用「加載」功能來延遲滑塊圖像加載。並在那裏放置一個靜態圖像，直到滑塊加載，然後在載入滑塊圖像後淡出靜態圖像。

在此期間，animate函數僅拾取該靜態圖像的高度，該高度實際上是div在加載所有圖像後應具有的高度。

現在，動畫滾動功能滾動到相關div的頂部。

感謝所有的努力，以幫助

來源

2016-12-23 09:07:38 user3526204

JS動畫功能，滾動到DIV，而不是頂部

回答

相關問題