如何使網頁滾動到使用slidedown（）進行動畫的元素？

我在我的網頁是隱藏在頁面加載的底部<div>，有可見頁腳這使得它滑下出現，使用jQuery slidedown()功能的鏈接。還有一個鏈接可以再次隱藏它。如何使網頁滾動到使用slidedown（）進行動畫的元素？

鏈接打開：

<a href="javascript:void(0)" class="cookies_open">Open</a>

元素與鏈接躲在裏面：

<div id="hiddenbit"> 
    <a href="javascript:void(0)" class="cookies_close">hide</a> 
</div>

JS：

$(document).ready(function(){ 
    $(".cookies_close").click(function(){ 
    $("#hiddenbit").slideUp(1000); 
    }); 
    $(".cookies_open").click(function(){ 
    $("#hiddenbit").slideDown(1000); 
}); 
});

現在，所有上述作品。但是，由於該元素是在頁面的底部，我需要在瀏覽器中向下滾動，使其視圖打開時。目前，滾動條展開，但頁面不向下滾動，因此用戶看不到它。

我該怎麼辦呢？

來源

2013-07-09 user2455426

想知道的答案是否幫... –

在您click事件補充一點：

//xpos : it will be 0 for you 
//ypos: you give some value, it will scrolldown with that pixel 
window.scrollTo(xpos,ypos);

來源

2013-07-09 00:41:24 Gyandeep

嗨，這不行，因爲我試圖向下滾動到不存在之前的頁面的一部分點擊鏈接到slidedown（）。隱藏的元件通過顯示隱藏的：無在CSS。 – user2455426

嘗試使其可見，然後再執行此操作。 – Gyandeep

您可以指定元素作爲超鏈接的href的id帶上它來查看。

您還需要採取元素從正常流動，使滾動大小不會改變 - 對此我申請position:absolute。

$(document).ready(function() { 
 
    $(".cookies_close").click(function() { 
 
     $("#hiddenbit").slideUp(1000); 
 
    }); 
 
    $(".cookies_open").click(function() { 
 
     $("#hiddenbit").slideDown(1000); 
 
    }); 
 
});

* { 
 
    /* prevent browser defaults*/ 
 
    margin:0px !important; 
 
    padding:0px !important; 
 
} 
 
html, body, #wrapper { 
 
    height:100%; 
 
} 
 
header { 
 
    height:15%; 
 
    background: #0080FF; 
 
} 
 
#content { 
 
    position:relative; 
 
    text-align:center; 
 
    background: #58D3F7; 
 
    height: 100%; 
 
} 
 
#hiddenbit{ 
 
    display:none; 
 
    position:absolute; 
 
    bottom:0; 
 
    width:100%; 
 
    height:100px; 
 
    background:hotpink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='wrapper'> 
 
    <header></header> 
 
    <div id="content"> <a href="#hiddenbit" class="cookies_open">Open</a> 
 

 
     <div id="hiddenbit"> 
 
      <a href="javascript:void(0)" class="cookies_close">hide</a> 
 
     </div> 
 
     
 
    </div> 
 
<div>

來源

2014-03-09 10:06:33

如何使網頁滾動到使用slidedown（）進行動畫的元素？

回答

相關問題