2017-03-17 105 views
-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>

即使被打印在控制台没有错误上述消息,该网页无法滚动到所需的股利。请帮助..

+0

哪里'#search_btn_home'元素?你看到'console.log'输出了吗? –

+2

我在你的代码中加了'#search_btn_home',它的工作非常好。 – nashcheez

+0

@nashcheez我的代码以前工作,但现在由于某种原因,它已停止工作..不知道为什么.. – Lucy

回答

1

及其与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>

+0

尝试过你的方法仍然无法正常工作。 – Lucy

+0

你可以让你的原始代码的小提琴。从你所提供的这是最好的解决方案。 –

0

添加按钮后,工作我一直试图在codepen运行你的代码和它的工作。 也许您的视图没有溢出,所以页面无法滚动到所需的对象(因为它已经在页面上)。

所有我已经在你的代码改变是有缺失的按钮

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

my codepen看一看,检查它是否解决您的问题。

+0

尝试过你的方法仍然无法正常工作.. – Lucy

0

您可以使用这样的事情:

<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 /> 

+0

尝试过你的方法仍然无法正常工作.. – Lucy