Scroll To A Section Of The Page When Clicking On The Navbar
I've been making my first website - a single page site with different sections containing content. I've created a nice looking navbar and have been scouring the internet to try and
Solution 1:
I checked your page on github and added ID's to your content. If you do for example: then you will go to a container with id="id".
For example with your page i added:
<li><ahref="#myskills">My Skills</a></li>with the HTML
<div id="myskills">
Here is the full HTML.
//More Menu Dropdown Toggle Functionvar main = function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
//Next Arrow Functionality
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nextSlide.length == 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
//Previous Arrow Click Functionality
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);/* General */.container {
width: 960px;
}
.underline {
border-bottom: 3px solid #7FCCE5;
}
.underlinegrey {
border-bottom: 3px solid #808080;
}
.underlineblack {
border-bottom: 3px solid #313131;
}
.underlinethin {
border-bottom: 1px solid #7FCCE5;
}
.circle-icon {
width: 80px;
height: 80px;
text-align: center;
4line-height: 80px;
font-size2.1em;
border-radius: 40px;
margin: auto;
color: #aaa;
background-color: #ddd;
}
.glyphicon {
position: relative;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
font-size: 35px;
}
.circle-icon.glyphicon {
top: 0;
line-height: 80px;
text-align: center;
}
/* Nav Bar */.nav {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 5px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
}
.nav.title {
position: fixed;
left: 100px;
top: -10px;
}
.logo-icon {
position: fixed;
left: 500px;
top: 8px;
}
/* Menu */.nav.menu {
float: right;
list-style: none;
margin-top: 5px;
}
.menu > li {
display: inline;
padding-left: 30px;
padding-right: 30px;
}
.menua {
color: #898989;
}
.menu.bordera {
border: 1px solid #7FCCE5;
padding: 15px;
padding-top: 2px;
padding-bottom: 2px;
}
/* Dropdown */.dropdown-menu {
font-size: 16px;
margin-top: 5px;
min-width: 105px;
z-index: 999;
}
.dropdown-menulia {
color: #898989;
padding: 6px20px;
font-weight: 300;
}
/* Jumbotron */.jumbotron {
background-image: url('http://p1.pichost.me/i/58/1822942.jpg');
height: 1020px;
background-repeat: no-repeat;
background-size: cover;
position: initial;
}
.jumbotron.container {
position: relative;
top: 250px;
}
.jumbotronh1 {
color: #fff;
font-size: 80px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
padding: 20px;
text-shadow: 0px0px3px#000;
}
.jumbotronp {
color: #fff;
font-size: 48px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
padding: 20px;
text-shadow: 0px0px3px#000;
}
.jumbotronh3 {
color: #fff;
font-size: 80px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
padding: 20px;
text-shadow: 0px0px3px#000;
}
.btn {
display: inline-block;
padding: 4px14px;
margin-bottom: 0px;
font-size: 13px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 1px;
border-color: #f7f6f6;
line-height: 20px;
font-weight: bold;
color: #f7f6f6;
background-color: transparent;
position: relative;
top: 50px;
left: 340px;
}
.btn:hover {
background-image: none;
background-color: #808080;
color: #f7f6f6;
}
/* About Me */.about {
height: 600px;
background-color: #ffffff;
}
.about.container {
top: 35px;
position: relative;
}
.abouth3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding;
20px;
text-align: center;
}
.aboutp {
position: relative;
top: 20px;
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding: 30px;
line-height: 210%;
}
/* My Skills */.myskills {
height: 880px;
background-color: #F7F6F6;
}
.myskills.container {
width: 1500px;
position: relative;
top: 35px;
}
.myskills.row {
position: relative;
text-align: center;
top: 80px;
padding-bottom: 50px;
}
.myskillsh3 {
color: #808080;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.myskillsh1 {
color: #808080;
font-size: 25px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-align: center;
padding-bottom: 50px;
}
.myskillsp {
color: #808080;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding;
20px;
text-align: center;
line-height: 200%;
}
.glyphicon-heart {
color: red;
}
.glyphicon-picture {
color: orange;
}
.glyphicon-cloud {
color: white;
}
.glyphicon-camera {
color: black;
}
.glyphicon-book {
color: darkviolet;
}
.glyphicon-music {
color: orangered;
}
/* My Work */.mywork {
height: 400px;
background-color: #FFFFFF;
}
.mywork.container {
position: relative;
top: 35px;
}
.myworkh3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 40px;
text-align: center;
}
.myworkh1 {
color: #313131;
font-size: 30px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.myworkp {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding: 50px;
text-align: center;
}
/* Contact */.contact {
height: 330px;
background-color: #313131;
}
.contact.container {
position: relative;
top: 35px;
}
.contact.row {
width: 300px;
position: relative;
left: 325px;
text-align: center;
top: 30px;
padding-bottom: 40px;
}
.contacth3 {
color: #F7F6F6;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding;
20px;
text-align: center;
}
.contacth1 {
color: #808080;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding: 10px;
text-align: center;
}
.contactp {
color: #F7F6F6;
font-size: 16px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 15px;
text-align: center;
}
.contacta {
color: #7FCCE5;
}
/* Exploration */.exploration {
height: 1100px;
background-color: #ffffff;
}
.exploration.container {
position: relative;
top: 35px;
width: 1200px;
}
.explorationh3 {
color: #313131;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: 20px;
text-align: center;
}
.explorationp {
color: #313131;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
}
.slider {
position: relative;
top: 50px;
width: 100%;
height: 800px;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
/* Slide feature */.slide-feature {
text-align: center;
height: 800px;
}
.slide-feature-1 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11036160_10152854777396270_5157414753497878003_o.jpg');
background-position: center;
}
.slide-feature-2 {
background-image: url('https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xta1/t31.0-8/11218515_10152909922431270_7749144937209461633_o.jpg');
background-position: center;
}
.slide-feature-3 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xpa1/t31.0-8/11187795_10152891725491270_1769195601160147349_o.jpg');
background-position: bottom;
}
.slide-feature-4 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xaf1/t31.0-8/11154672_10152854784061270_3532862830070230799_o.jpg');
background-position: center;
}
.slide-feature-5 {
background-image: url('https://scontent-lhr.xx.fbcdn.net/hphotos-xap1/t31.0-8/11164749_10152909922426270_8192461025609874418_o.jpg');
background-position: center;
}
.slide-featureimg {
margin-top: 112px;
margin-bottom: 28px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
position: relative;
top: 40px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
position: relative;
top: 40px;
}
.slider-dotsli {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dotsli.active-dot {
color: #7FCCE5;
}
/*Music*/.music {
height: 1200px;
background-color: #313131;
}
.music.container {
position: relative;
top: 35px;
width: 1500px;
}
.musich3 {
color: #F7F6F6;
font-size: 40px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-bottom: ;
40px;
text-align: center;
}
.musich1 {
color: #808080;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding: 30px;
text-align: center;
}
.musicp {
color: #F7F6F6;
font-size: 16px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding-;
text-align: center;
}
iframe {
position: relative;
top: 10px;
margin: 20px;
}
/* Footer */.footer {
height: 200px;
background-color: #F7F6F6;
}
.footerh1 {
color: #808080;
font-size: 20px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
text-align: center;
padding-bottom: 50px;
position: relative;
top: 35px;
}
.footerp {
color: #808080;
font-size: 16px;
font-family: 'Oswald', sans-serif;
font-weight: 300;
padding;
20px;
text-align: center;
line-height: 200%;
}<!doctype html><html><head><linkhref='http://fonts.googleapis.com/css?family=Oswald:400,300'rel='stylesheet'><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/style.css"rel="stylesheet"><scriptsrc="http://code.jquery.com/jquery-latest.js"></script></head><body><!-- NAV BAR --><divclass="nav"><divclass="container"><divclass="title"><h3>Stewart Ehoff</h3></div><ahref="#"class="logo-icon"><imgsrc="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/shield.svg"></a><ulclass="menu"><li><ahref="#">Home</a></li><li><ahref="#about">About</a></li><li><ahref="#myskills">My Skills</a></li><li><ahref="#mywork">My Work</a></li><liclass="border"><ahref="#contactme">Contact Me</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle">More<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Exploration</a></li><li><ahref="#">Music</a></li></ul></li></ul></div></div><!--JUMBOTRON STARTS HERE--><divclass="jumbotron"><divclass="container"><h1>Hello, world.</h1><p>My name is <b>Stewart Ehoff</b> and I'm a self-taught web developer.</p><h3>Let's work <em>together.</em></h3><buttontype="button"class="btn">TELL ME MORE</button><buttontype="button"class="btn">RESUME</button></div></div><!--JUMBOTRON ENDS HERE--><!--ABOUT STARTS HERE--><divclass="about"id="about"><divclass="container"><h3><spanclass="underline">About Me</span></h3><p>I'm a self-taught web developer living in Leicester, United Kingdom. I've been working with technology ever since I was a little boy.</p><p>In 2014, I graduated from De Montfort University with a First Class Honours in Music, Technology and Innovation. Shortly after graduating, I recieved an internship at a professional audio solutions company, and went on to conduct work for companies
such as Warner Records and Atlantic Records.</p><p>This website is the fruits of my labour, I hope you enjoy it.</p></div></div><!--MY SKILLS STARTS HERE--><divclass="myskills"id="myskills"><divclass="container"><h3><spanclass="underlineblack">My Skills</span></h3><!--Row 1--><divclass="row"><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-heart"></span></div><h1class="underlinethin">Self-taught</h1><p>Everything I know I've taught myself. I'd like to think that shows a solid level of drive and dedication.</p></div><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-picture"></span></div><h1class="underlinethin">Front end development</h1><p>Able to create modern, beautifully designed websites with HTML, CSS and JavaScript that feel great to use.</p></div><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-cloud"></span></div><h1class="underlinethin">Frameworks and libaries</h1><p>Confident with popular front-end (Bootstrap, jQuery) and back-end (Ruby on Rails) frameworks and libaries.</p></div></div><!--Row 2--><divclass="row"><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-camera"></span></div><h1class="underlinethin">Photography</h1><p>Photo taking, editting and asset creation in Adobe Photoshop and Lightroom.</p></div><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-book"></span></div><h1class="underlinethin">Learning and problem solving</h1><p>Constantly striving for educational progression, experimenting with new technologies and refining skills. I see a problem as a challenge to learn.</p></div><divclass="col-md-4"><divclass="circle-icon"><spanclass="glyphicon glyphicon-music"></span></div><h1class="underlinethin">Audio</h1><p>Audio engineer trained in building loudspeaker systems, recording, mixing and mastering audio.</p></div></div></div></div><!--MY WORK STARTS HERE--><divclass="mywork"id="mywork"><divclass="container"><h3><spanclass="underline">My Work</span></h3><h1>Coming <i>soon...</i></h1><p>I am always looking for exciting and innovative projects to work on. If you want to work together, then please <ahref="contact">contact me!</a></p></div></div><!--CONTACT STARTS HERE--><divclass="contact"id="contactme"><divclass="container"><h3><spanclass="underlinegrey">Contact Me</span></h3><h1>Send me an email at <ahref="#">stewartehoff@gmail.com</a> or find me on:</h1><divclass="row"><divclass="col-md-6"><imgsrc="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/github.png"><p>Github</p></div><divclass="col-md-6"><imgsrc="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/linkedin.png"><p>LinkedIn</p></div></div></div></div><!--FLIPBOARD STARTS HERE--><!--EDIT SLIDES HERE--><divclass="exploration"><divclass="container"><h3><spanclass="underline">Exploration</span></h3><p>I love exploring and capturing epic moments on my journeys. Here's some of my favourites from my latest trip across the west coast of America.</p></div><divclass="slider"><!--SLIDE 1 START--><divclass="slide active-slide slide-feature slide-feature-1"><divclass="container"><divclass="row"></div></div></div><!--SLIDE 1 END--><!--SLIDE 2 START--><divclass="slide slide-feature slide-feature-2"><divclass="container"><divclass="row"></div></div></div><!--SLIDE 2 END--><!--SLIDE 3 START--><divclass="slide slide-feature slide-feature-3"><divclass="container"><divclass="row"></div></div></div><!--SLIDE 3 END--><!--SLIDE 4 START--><divclass="slide slide-feature slide-feature-4"><divclass="container"><divclass="row"></div></div></div><!--SLIDE 4 END--><!--SLIDE 5 START--><divclass="slide slide-feature slide-feature-5"><divclass="container"><divclass="row"></div></div></div><!--SLIDE 5 END--></div><!--Slider navigation. Add more "<li class="dot">•</li>" for more slides.--><divclass="slider-nav"><ahref="#"class="arrow-prev"><imgsrc="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/arrow-left.svg"></a><ulclass="slider-dots"><liclass="dot active-dot">•</li><liclass="dot">•</li><liclass="dot">•</li><liclass="dot">•</li><liclass="dot">•</li></ul><ahref="#"class="arrow-next"><imgsrc="https://raw.githubusercontent.com/Ardiaz/Stewart-Ehoff.com/master/images/arrow-right.svg"></a></div></div><!--FLIPBOARD ENDS HERE--></div><divclass="music"><divclass="container"><h3><spanclass="underlinegrey">Music</span></h3><h1>In my early teens, I purchased my first drum kit. Now, I'm more than just a drummer, I'm a music producer too. Here are a few tracks from my production portfolio:</h1><!--Obscurity--><iframewidth="100%"height="166"scrolling="no"frameborder="no"src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/149734252&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe><!--Deception--><iframewidth="100%"height="166"scrolling="no"frameborder="no"src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154191965&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe><!--Circadian--><iframewidth="100%"height="166"scrolling="no"frameborder="no"src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154192672&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe><!--Transhuman--><iframewidth="100%"height="166"scrolling="no"frameborder="no"src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/73625501&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe><h1>For more of my music, please visit my <ahref='#'>SoundCloud</a> profile.</h1></div></div><divclass="footer"><divclass="container"><h1>A website by Stewart Ehoff</h1><p>I hope you enjoyed visiting my website. Please don't hesitate to contact me, I would <b>love</b> to hear from you!</p></div></div></body></html>Solution 2:
Try this.
$(document).scrollTop(100)
Eg:
For Home link
<li class="home"><ahref="#home">Home</a></li>
$('.home').click(function(e){
$(document).scrollTop(100)
});
Solution 3:
you can use anchor tags href=#id of the section.
<a href="#images">nav</a>
<section id="images">....</section>
when you click on that anchor tag it'll move to the respected section. is that what you expecting or correct me if I didn't understand your question
Post a Comment for "Scroll To A Section Of The Page When Clicking On The Navbar"