jQuery 滚动到 div onclick 不工作
jQuery scroll to div onclick not working
我正在尝试在我的网站 http://www.dicosoftware.com 上实施滚动到 div 以平滑滚动到网站的每个部分,但它不起作用。您可以到现场验证,如有反馈,将不胜感激。
我在 main.js 文件下使用以下 jQuery 函数。
$(".js--scroll-to-main").click(function(){
$('html,body').animate({scrollTop:$("#header").offset().top},2000);
});
$(".js--scroll-to-about_us").click(function({
$('html,body').animate({scrollTop:$("#sectionabout_us").offset().top},2000;
});
$(".js--scroll-to-services").click(function(){
$('html, body').animate({scrollTop:$("#section-services").offset().top},2000);
});
$(".js--scroll-to-contact_us").click(function(){
$('html, body').animate({scrollTop:$("#section-contact_us").offset().top},2000);
});
我的链接是在无序列表下设置的
<ul class="main-nav hidden js--main-nav">
<li> <a class="js--scroll-to-main" href="#">Inicio</a> </li>
<li> <a class="js--scroll-to-about_us" href="#">Nosotros</a> </li>
<li> <a class="js--scroll-to-services" href="#">Servicios</a> </li>
<li class="contact-link"> <a class="js--scroll-to-contact_us" href="#">Contactanos</a> </li>
</ul>
并且每个部分都在以下 div 下设置。
<header id="header"> ... </header>
<section class="section-about_us js--section-about_us" id="section-about_us"> ... </section>
<section class="section-services js--section-services" id="section-services"> ... </section>
<section class="section-contact js--section-contact" id="section-contact_us"> ... </section>
注意控制台中的错误:
TypeError: $('html, body').animate is not a function.
在类似的 中有人指出 jQuery 的精简版本不包含很多功能。
您应该将下面的脚本更改为 jQuery 的完整版本:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
如:
https://code.jquery.com/jquery-3.1.1.min.js
我正在尝试在我的网站 http://www.dicosoftware.com 上实施滚动到 div 以平滑滚动到网站的每个部分,但它不起作用。您可以到现场验证,如有反馈,将不胜感激。
我在 main.js 文件下使用以下 jQuery 函数。
$(".js--scroll-to-main").click(function(){
$('html,body').animate({scrollTop:$("#header").offset().top},2000);
});
$(".js--scroll-to-about_us").click(function({
$('html,body').animate({scrollTop:$("#sectionabout_us").offset().top},2000;
});
$(".js--scroll-to-services").click(function(){
$('html, body').animate({scrollTop:$("#section-services").offset().top},2000);
});
$(".js--scroll-to-contact_us").click(function(){
$('html, body').animate({scrollTop:$("#section-contact_us").offset().top},2000);
});
我的链接是在无序列表下设置的
<ul class="main-nav hidden js--main-nav">
<li> <a class="js--scroll-to-main" href="#">Inicio</a> </li>
<li> <a class="js--scroll-to-about_us" href="#">Nosotros</a> </li>
<li> <a class="js--scroll-to-services" href="#">Servicios</a> </li>
<li class="contact-link"> <a class="js--scroll-to-contact_us" href="#">Contactanos</a> </li>
</ul>
并且每个部分都在以下 div 下设置。
<header id="header"> ... </header>
<section class="section-about_us js--section-about_us" id="section-about_us"> ... </section>
<section class="section-services js--section-services" id="section-services"> ... </section>
<section class="section-contact js--section-contact" id="section-contact_us"> ... </section>
注意控制台中的错误:
TypeError: $('html, body').animate is not a function.
在类似的
您应该将下面的脚本更改为 jQuery 的完整版本:
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
如:
https://code.jquery.com/jquery-3.1.1.min.js