Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Philip Ollas
Philip Ollas
5,705 Points

Header styling

Hi, How could I link the header so that it would work like this : http://www.oshkoshheatingandair.com/index.html#heating

Here is the code html code:

(Please note that here is only a part of the code)

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gartman Mechanical Services</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <header class="main-header">
    <div class="container clearfix">
        <h1 class="name"><a href="#"><img class="gartman" src="img/gartmanlogo.pdf" alt="GMS"></a></h1>
         <p>Follow us</p>
        <a href="https://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>Like us</p>
        <a href="https://www.facebook.com/pages/Gartman-Mechanical-Services"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>

        <ul class="main-nav">
            <li><a href="selected">Home</a></li>
            <li><a href="selected">Company Overview</a></li>
            <li><a href="selected">HVAC</a></li>
            <li><a href="selected">Refrigeration</a></li>
            <li><a href="selected">Plumbing</a></li>
            <li><a href="selected">Trane Residential</a></li>
            <li><a href="selected">Professional Engineering</a></li>
            <li><a href="selected">Portfolio</a></li>
            <li><a href="selected">Contact us</a></li>
            <li><a href="selected">Directions</a></li>
        </ul>
      </div>
    </header><!--/.main-header-->   

    <div class="banner">
        <h1 class="headline"><img class="logo" src="img/GMSlogo2015.pdf" alt="GMS"></h1>
        <span class="tagline">Over 50 years of professional service in Oshkosh and Fox Valley</span>
    </div><!--/.banner-->

  <div class="container clearfix">
    <div class="secondary col">
        <h2><a href="selected">Home</a></h2>
        <p>Welcome to Gartman Mechanical Services! We offer an array of professional industrial and commercial services including HVAC , Plumbing, Refrigeration, Professional Engineering, Testing and Analysis. We also offer fast and reliable residential services and are an authorized Trane dealer. </p>
        <p>Please click on our navigation to see details of each type of service and take a
look at our project portfolio to see a listing of our project experience.
Thank You!</p>
        <p>GARTMAN MECHANICAL SERVICES HAS PROUDLY SERVED THE OSHKOSH AND FOX VALLEY AREA FOR OVER 50 YEARS. THE OVERALL GOAL FOR GARTMAN HAS ALWAYS BEEN TO OFFER THE HIGHEST QUALITY PRODUCTS AND SERVICES AT THE MOST AFFORDABLE PRICES. </p>
    </div><!--/.secondary-->

    <div class="container clearfix">
    <div class="secondary col">
´´´

2 Answers

Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

Hello, Philip! There are several ways to do it. If you change your html like below you will get result like that, but it will jump to the new place rather sharply. (in <p> </p> your block which you want to display when the link is clicked)

            <li><a class="link" href="#HVAC ">HVAC</a></li>

            <p id="HVAC"  >Welcome to Gartman Mechanical Services! We offer an array of professional industrial and  commercial .. </p>

If you want to the scroll to be more smooth you can add a script before your close </body> tag or a link to it as to all other scripts if it will be in external file.

In the example of script which I send you 1400 is a speed of scrolling. You can easily control it and change. 

   <script
      src="http://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
  </script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("a.link").click(function () {
          var clicks = $(this).attr("href");
          var scrolls = $(clicks).offset().top;
          $('html,body').animate(
           { scrollTop: scrolls }
           , 1400 );
          return false;
        });
      });
    </script>

HTML will be the same as if you won't use script.

Hope that it will solve your problem!

Philip Ollas
Philip Ollas
5,705 Points

Nice, I think you have solved my problem. Will try that out. Before doing so, do I have to add this code to every link in the header or do I only do it once ?

 <script
      src="http://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous">
  </script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("a.link").click(function () {
          var clicks = $(this).attr("href");
          var scrolls = $(clicks).offset().top;
          $('html,body').animate(
           { scrollTop: scrolls }
           , 1400 );
          return false;
        });
      });
    </script>
´´´
Evgeniia Mas
Evgeniia Mas
4,452 Points
Evgeniia Mas
Evgeniia Mas
4,452 Points

You have to give to each block of the text (page section) unique Id and make links to them. So you will have different pairs (different names) like I showed you. Add also to each <а> the same class "link" as I showed so the script could be used with any of the link. That way you needn't duplicate this script on the same page. You have only to give your <a> element class, href and your text blocks give ids in the right way! Hope you won't meet any blackouts doing that!

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Philip

To make your header fixed at the top when scrolling do this to the .main-header

.main-header {
position: fixed;
top: 0;
left: 0;
}
Philip Ollas
Philip Ollas
5,705 Points

Thank you for the response, I have a fixed header but what I like to add to my page would that if I press on "HVAC", the page would automatically scroll down to it. Got a slight blackout on how it should been done so that's why I'm reaching out to you.