I'm trying to integrate the slide into my navigation. Here is the slide that I am trying to integrate.
Here is the code I'm working on and the website is rosannalui.com. I'm a bit stumped what I'm doing wrong and any help would be greatly appreciated. Thank you so much!
<html>
<head>
<title>Rosanna Lui</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400" rel="stylesheet">
<link href="https://fonts.go``ogleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<link href="style.css?v=1" rel="stylesheet">
<meta name="viewport" content="width=700">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #9E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
</style>
</head>
———
<div class="container-fluid">
——
<body class="bodyhome">
<!-- Menu -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a class =“menuhello” href="#">Hello</a></li>
<li><a class =“menuwork” href=“#work”>Work</a></li>
<li><a class =“menucontact” href=“#contact”>Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<!-- Hello -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<div id="hello" class="darkgray">
<div id="hellotext">
<h1>I'm Rosanna, a visual and UX designer, and I am passionate about making <span class="bluetext">delightful</span> experiences.</h1>
</div>
</div>
<!-- Dots -->
<script>
particlesJS.load('hello', 'particles.json', function() {
console.log('hello@rosannalui.com');
});
</script>
</div>
<div id="section2" class="container-fluid">
<!-- Work -->
<a name="work"></a>
<div class="grid">
<div class="work work1">
<a href="./bee/">
<h2>Bee Adventurous</h2>
<h3>Augmented Reality Game</h3>
</a>
</div>
<div class="work work2">
<a href="./husky">
<h2>Husky Checkout</h2>
<h3>Equipment Rental Application</h3>
</a>
</div>
<div class="work work3">
<a href="./chord">
<h2>Chordinate</h2>
<h3>Networking App for Musicians</h3>
</a>
</div>
<div class="work work4">
<a href="./design">
<h2>Design Work</h2>
<h3>Illustration and Design</h3>
</a>
</div>
</div>
</div>
<div id="section3" class="container-fluid">
<!-- Contact -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<a name="contact"></a>
<div class="lightgray contact content">
<img src="images/rosanna.png" style="margin-top: -3vw" />
<div>
<h3>Rosanna Lui</h3>
<p>
I am a recent Interactive Media Design graduate at the University of Washington. Inspired by my background as a daughter of immigrants, I believe that it is important to design with the user in mind and to create content that is accessible to everyone.
I am always looking for new projects and opportunities to collaborate with others.
</p>
<p>
Email me: <a href="mailto:hello@rosannalui.com">hello@rosannalui.com</a>
</p>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
For a quick and dirty solution use:
html{
scroll-behavior: smooth;
}
Note that not all browsers support this.
Another quick way is to use jump.js.
Add this to your head:
<script src="https://rawgit.com/jumpjs/jumpjs/master/dist/jumpjs.min.js"></script>