jQuery的動畫滾動不工作

-1

我想滾動頁面上的按鈕點擊使用jQuery的特定div。即使我在js控制檯中沒有收到錯誤，頁面也不會滾動到所需的div。我甚至嘗試在標籤後面添加jQuery文件&，但問題仍然存在。jQuery的動畫滾動不工作

校驗碼：

$("#search_btn_home").click(function() { 
 
    console.log("Inside existing click function of search"); 
 
    $('html,body').animate({ 
 
    scrollTop: $("#friendstoreline").offset().top 
 
    }, 'slow'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-image: url('images/bluebackground.jpg'); background-repeat: repeat; min-height: 500px"> 
 
    <div id="search_btn_home"> 
 
    Click 
 
    </div><br /> 
 
    <div id="friendstoreline"><strong>The Friend Store</strong></div><br /> 
 
</div>

即使被打印在控制檯沒有錯誤上述消息，該網頁無法滾動到所需的股利。請幫助..

來源

2017-03-17 Lucy

哪裏'＃search_btn_home'元素？你看到'console.log'輸出了嗎？ –

我在你的代碼中加了'＃search_btn_home'，它的工作非常好。 – nashcheez

@nashcheez我的代碼以前工作，但現在由於某種原因，它已停止工作..不知道爲什麼.. – Lucy

及其與ID #search_btn_home

JSFIDDLE

$("#search_btn_home").click(function() { 
 
    console.log("Inside existing click function of search"); 
 
    $('html,body').animate({ 
 
     scrollTop: $("#friendstoreline").offset().top 
 
    }, 
 
    'slow'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="min-height:500px"> 
 
    <br /> 
 
    <div id="friendstoreline"><strong>The Friend Store</strong></div> 
 
    <br /> 
 
</div> 
 
<button id="search_btn_home">CLICK 
 

 
</button>

來源

2017-03-17 12:57:41

嘗試過你的方法仍然無法正常工作。 – Lucy

你可以讓你的原始代碼的小提琴。從你所提供的這是最好的解決方案。 –

添加按鈕後，工作我一直試圖在codepen運行你的代碼和它的工作。也許您的視圖沒有溢出，所以頁面無法滾動到所需的對象（因爲它已經在頁面上）。

所有我已經在你的代碼改變是有缺失的按鈕

<button id="search_btn_home">Scroll</button>

在my codepen看一看，檢查它是否解決您的問題。

來源

2017-03-17 12:58:10

嘗試過你的方法仍然無法正常工作.. – Lucy

您可以使用這樣的事情：

<div id="menu"><button class="page-scroll" href="#friendstoreline"></button></div> 
<div style="background-image: url('images/bluebackground.jpg'); 
background-repeat:repeat;min-height:500px"> 
<br /> 
<div id="friendstoreline"><strong>The Friend Store</strong></div> 
<br />

來源

2017-03-17 13:14:52

嘗試過你的方法仍然無法正常工作.. – Lucy

jQuery的動畫滾動不工作

回答

相關問題