So I have tried everything I checked a whole bunch of sites and it just won't do it.
I am trying to get scroll-behavior to work on this site. I have put the scroll-container put ids fixed css but it is just not working. Any ideas as to why smooth-scrolling is NOT working on this?
Basically What I need is the navbar area smooth scroll to the appropriate areas on the page. So Menu to Menu, Deals to Deals, About to About etc...I can't figure out why the smooth scrolling isn't working. Any ideas? Thanks!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
解决方案
You just need to add scroll-behavior: smooth; to your html style.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">$11.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">$11.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
