切換div跳回到頁首

我有一個可點擊div的頁面，點擊時切換內容。當div被第二次點擊（關閉內容）時，頁面跳回到頂部。切換div跳回到頁首

我看到這是其他人遇到的問題，但是我發現的所有解決方案都與錨標記有關，這不是問題。

我已經嘗試更改我的代碼，每個解決方案here並添加return false;和event.preventDefault();，但都沒有工作。我究竟做錯了什麼？

的jQuery：

$(document).ready(function(){ 
     $('h1').animate({"right":"147px"},3000); 
     $('.more').toggle(
       function(){ 
        $(this).css({ 
         'z-index':'100', 
         'background-position': '41px 0px' 
         }); 
        $('#heroFullColor').hide(); 
        $('#heroNoColor').show(); 
        $('div.' + $(this).attr('id')).fadeIn('fast'); 
        $('.more').not(this).hide(); 
       }, 
       function(){ 
        $(this).css({ 
         'background-position': '0px 0px' 
          }); 
        $('div.' + $(this).attr('id')).fadeOut('fast');     
        $('#heroNoColor, .infoWindow').hide(); 
        $('#heroFullColor').fadeIn('fast');     
        $('.more').not(this).show(); 
       }); 
    });

HTML結構（這種重複的頁面上幾次）：

<div class="more" id="franceFlag"></div> 
    <div class="infoWindow franceFlag"> 
     <img class="imageOn" src="images/lp_foundry_on-franceFlag.jpg" width="71" height="213" alt="French Flag" id="franceFlagOn" /> 
     <p class="franceFlag">blah blah blah</p> 
    </div>  
    <div class="more" id="heliBoth"></div> 
    <div class="infoWindow heliBoth"> 
     <img class="imageOn" src="images/lp_foundry_on-heliBoth.jpg" width="296" height="750" alt="Helicopters" id="heliBothOn" /> 
     <p class="heliBoth">blah blah blah</p> 
    </div>

Here is a fiddle - 如果滾動到右下角，然後點擊標誌旁邊的+號，你會明白我的意思。

來源

2015-01-26 surfbird0713

你可以在http://jsfiddle.net/上發佈一個工作示例嗎？ – pyb 2015-01-26 22:03:55

@BobM http://jsfiddle.net/11cptbmz/更新了這個問題。謝謝。 – surfbird0713 2015-01-27 15:20:41

這是因爲你是隱藏，給了你的容器高度的元素，則呈現出不同的一個。所以它暫時沒有高度。

如果你明確地給你的容器一個高度，那不會發生。例如。

#lp-foundry-container { 
height: 940px; 
}

第一次點擊不會發生同樣的情況，因爲您會立即隱藏並顯示。如果你要改變

$('#heroNoColor').show();

到

$('#heroNoColor').fadeIn('fast');

喜歡它的關閉功能，那麼同樣的事情會發生在第一次點擊。

來源

2015-01-27 15:33:02

正確地解釋它是很好的。但是，使用僅限CSS的修復程序確實需要一些思考，因爲在攜帶元素上隱藏「（）」後，情況往往會發生變化。如果佈局允許的話，這仍然是一條路。 – 2015-01-27 15:44:40

確實在實踐中通常並不那麼簡單 - 在隱藏（）之前，還可以選擇使用javascript設置高度。但是如果可能的話，CSS只是很好。 – 2015-01-27 15:52:39

謝謝！我選擇了這個答案，因爲我同意 - 只有在可能的情況下，只有css才能解決問題。 – surfbird0713 2015-01-27 16:15:32

試試這個

JQuery的

$(document).ready(function(){ 
     $('h1').animate({"right":"147px"},3000); 
     $('.more').toggle(
       function(){ 
        $(this).css({ 
         'z-index':'100', 
         'background-position': '41px 0px' 
         }); 
        $('#heroFullColor').hide(); 
        $('#heroNoColor').show(); 
        $('div.' + $(this).attr('id')).fadeIn('fast'); 
        $('.more').not(this).hide(); 
       }, 
       function(){ 
        $(this).css({ 
         'background-position': '0px 0px' 
          }); 
        $('div.' + $(this).attr('id')).fadeOut('fast');     
        $('#heroNoColor, .infoWindow').hide(); 
        $('#heroFullColor').fadeIn('fast');     
        $('.more').not(this).show(); 
       }); 

       //What I added 
       $(".more").click(function() 
       { 
        var div = $(this); 
        $(window).scrollTop(div.offset().top).scrollLeft(div.offset().left); 
       }); 
    });

基本上你只是把目前的頂部和點擊的DIV的左位置，並設置頁面，在這一點上，一旦你把自己定位完成。

Fiddle Demo

BTW，這是一個很酷的想法，幹得漂亮！

來源

2015-01-27 15:29:09

感謝稱重！這對我來說很有意義，但是與其他解決方案一起使用，因爲CSS-only在可能時很好。 – surfbird0713 2015-01-27 16:15:54

我所知道的唯一的解決辦法是這樣的：

$(document).ready(function(){ 
     .... 
     $('.more').toggle(
       function(){ 
        ... 
       }, 
       function(){ 
        var tempTop = $(window).scrollTop(); //<----remember Y 
        var tempLeft = $(window).scrollleft(); //<----remember X 
        .... your code here ... 
        //----> now restore the position 
        $(window).scrollTop(tempTop); 
        $(window).scrollLeft(tempLeft); 

       } 
     );

來源

2015-01-27 15:29:20

切換div跳回到頁首

回答

相關問題