我正在从Udemy课程项目中完成一个网站，并按照所有步骤进行操作，但是我仍然遇到问题。我希望通过单击它们将我网站上的两个按钮滚动到所需部分。按钮：“我饿了”应该把我带到“计划”，“显示更多”应该把我带到“功能”部分。
网站链接为http://omnifood.lavaspace.de 您可以查看源代码或使用开发人员工具进行检查。
HTML的第一部分
<div class="hero-text-box">
<h1> Goodbye junk food. <br> Hello super healthy meals. </h1>
<a class="btn btn-full js--scroll-to-plans" href="#" > I'm hungry </a>
<a class="btn btn-ghost js--scroll-to-start" href="#"> Show me more </a>
</div>
</header>
<section class="section-features js--section-features" id="features">
<div class="row">
和此HTML部分
<section class="section-plans js--section-plans" id="plans">
<div class="row">
<h2>Start eating healthy today</h2>
</div>
以下是有关CSS的部分
/* BUTTONS */
.btn:link,
.btn:visited,
input[type=submit]{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full,
.btn-ghost {
margin-top: 3px;
margin-bottom: 3px;
}
.btn-full:link,
.btn-full:visited,
input[type=submit]{
background-color: #e67e22;
border: 1px solid #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited {
border: 1px solid #e67e22;
color: #e67e22;
}
.btn:hover,
.btn:active,
input[type=submit]:hover,
input[type=submit]:active {
background-color: #cf6d17;
}
.btn-full:hover,
.btn-full:active,
input[type=submit] {
border: 1px solid #cf6d17;
}
.btn-ghost:hover,
.btn-ghost:active {
border: 1px solid #cf6d17;
color: #fff;
}
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.section-plans {
background-color: #f4f4f4;
}
.section-features .long-copy {
margin-bottom: 30px;
}
这是Javascript代码，应命令按钮滚动到该部分。我粘贴了所有内容，因为JS函数之间可能存在一些冲突，导致滚动无法正常工作。
/* STICKY NAVIGATION */
$(document).ready(function() {
$('.js--section-features').waypoint(function(direction){
if(direction == "down"){
$('nav').addClass('sticky');
}else{
$('nav').removeClass('sticky');
}
}, {
offset: '120px;'
});
/* SCROLL BUTTONS */
$('.js--scroll-to-plans').click(function (){
$('html, body').animate({scrollTop: $('.js--section-plans').offset().top}, 1000);
});
$('.js--scroll-to-start').click(function (){
$('html, body').animate({scrollTop: $('.js--section-features').offset().top}, 1000);
});
});
$('a[href*="#"]').on('click',function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
/* ANIMATIONS ON SCROLL */
$('.js--wp-1').waypoint(function(direction) {
$('.js--wp-1').addClass('animated fadeIn')
}, {
offset: '50%'
});
$('.js--wp-2').waypoint(function(direction) {
$('.js--wp-2').addClass('animated fadeInUp')
}, {
offset: '50%'
});
$('.js--wp-3').waypoint(function(direction) {
$('.js--wp-3').addClass('animated fadeIn')
}, {
offset: '50%'
});
$('.js--wp-4').waypoint(function(direction) {
$('.js--wp-4').addClass('animated pulse')
}, {
offset: '50%'
});
/* MOBILE MENU */
$('.js--nav-icon').click(function(){
var nav =$('.js--main-nav');
var icon = $('.js--nav-icon');
nav.slideToggle(200);
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addclass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
/* MAPS */
var map = new GMaps({
el: '#map',
lat: -12.043333,
lng: -77.028333
});
答案 0 :(得分：0)
您可以通过将部分ID放入href
中来提出通用解决方案<a href=“#plans"> I'm hungry </a>
并使用以下jQuery代码：
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 1000);
return false;
});