CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sander van Hooff
Sander van Hooff

Reputation: 45

How do you go to a certain section of the website by clicking on a link?

I want to go to a specific section of my website when I click on the link in the menu bar for that section of the website, so you do not have to scroll through all the content, but to have links to the different sections. I've read that you can do this with jQuery and make an animation for it so that the page can smoothly go to that section of the website.

Here's the HTML code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script type="text/javascript" src="java.js"></script>

    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <title>Test Website</title>
        <meta name="" content="">

        <script type="text/javascript">

        </script>

    </head>
    <body>

    <header>

        <div id="title">
            <h1 class="headertext">My Test Website</h1>
        </div>

        <div id="menubar">
            <ul>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
            </ul>   
        </div>

    </header>
    <div class="hide">


    </div>

    <div id="container">

        <div id="leftmenu">
            <ul>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
                <li><a href="index.html">Homepage</a></li>
            </ul>
            <div id="triangle"></div>
        </div>

        <div id="content">

            <h1>Contentpage</h1></br>

            Picture slideshow
            </br>
            </br>

            <div class="slider">
                <img id="1" src="images/car1.jpg" border="0" alt="car1"/>
                <img id="2" src="images/car2.jpg" border="0" alt="car2"/>
                <img id="3" src="images/car3.jpg" border="0" alt="car3"/>
                <img id="4" src="images/car4.jpg" border="0" alt="car4"/>
                <img id="5" src="images/car5.jpg" border="0" alt="car5"/>
            </div><!--slider end-->

            <div class="shadow"></div>


            <div class="borderbottom"></div>

        </div><!--content div-->

    </div>


</body>
</html>

And here is the CSS code:

*{
    margin: 0 auto 0 auto;
    text-align: left;
    color: #ffffff;
}

body{
    margin: 0;
    text-align: left;
    font-size: 13px;
    font-family: arial, helvetica, sens-serif;
    color: #ffffff;
    width: 1200px;
    height: auto;
    background: #f4f4f4;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(0,0,0,.8); 
    z-index: 10;
}

h1{
    color: black;
    text-align: center;
}

.hide
{
    position: fixed;
    width: 100%;
    top: 0;
    background: rgba(255,255,255,1);
    z-index:5;  
    height: 123px;
}
.headertext{
    margin-top: 15px;
    text-align: center;
    color: white;
}

#title{     
    font-size: 20px;
    margin: -10px 0 30px 0;
    width: 100%;
    height: 70px;
    border-top: 2px solid #000000;
    border-bottom: 2px solid #000000;
}

#menubar{
    margin-top: 10px;
    float: left;
    clear: both;
    width: 100%;
    height: 20px;
    list-style: none;
    border-bottom: 2px solid #010000;
}

#menubar ul{
    list-style: none;
    margin-top: -15px;
    text-align: center;
}

#menubar ul li{
    list-style: none;
    display: inline;
    padding-right: 80px;
}

#menubar ul li a{
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}

#menubar ul li a:hover{
    border-bottom: 2px solid #ffffff;
}

#container{
    width: 1200px;
    height: 1400px;
}

#leftmenu{
    position: fixed;
    margin-top: 123px;
    margin-left: 50px;
    padding-top: 20px;
    float: left;
    width: 160px;
    height: 350px;
    list-style: none;
    background: rgba(0,0,0,0.8);
    color: #ffffff;
    border-left: 2px solid #010000;
    border-right: 2px solid #010000;
}

#leftmenu ul li{
    display: block;
    padding-bottom: 50px;
}

#leftmenu ul li a{
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
}

#leftmenu ul li a:hover{
    border-bottom: 2px solid #ffffff;
    transition: opacity .5s ease-in;
    opacity: 1;
}

#triangle{
    margin-top: 12px;
    margin-left: -1px;
    width: 0px; 
    height: 0;
    border-top: 80px solid rgba(0,0,0,0.8);
    border-left: 82px solid transparent; 
    border-right: 82px solid transparent; 
}

#content{
    text-align: left;
    margin-left: 100px;
    width: 1000px;
    padding-top: 150px;
    padding-left: 160px;
    color: #000000;
    font-weight: bold;
    text-align: center;
    font-size: 15px;
}

.slider{
    margin-top: 20px;
    width: 600px;
    height: 400px;
    overflow: hidden;
    margin: auto;
    border-radius: 10px;
    vertical-align: middle;
}

.shadow{
    background-image:url(../images/shadow.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 850px;
    height: 144px;
    vertical-align: middle;
    margin-top: -50px;
}

.slider img{
    width: 600px;
    height: 400px;
    display: none;
}

.borderbottom{
    border: 6px solid rgba(0,0,0,0.8);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    width: 1000px;
    position: fixed;
    margin-top: 20px;
}

Upvotes: 2

Views: 10218

Answers (4)

Aditya
Aditya

Reputation: 4463

If you have jQuery loaded you could try like this, no plugin required just jquery will do...

HTML:

 <div id="menubar">
        <ul>
          <li><a href="#somediv">Homepage</a></li>
          <li><a href="#somediv">Homepage</a></li>
          <li><a href="#somediv">Homepage</a></li>
          ........all the menu items-------
      </ul>

JS:

$('#menubar ul li a').on('click',function(event){
   var $anchor = $(this);
   $('html, body').animate({
     scrollTop: $($anchor.attr('href')).offset().top + "px"
   }, 1500);
   event.preventDefault();
});

This is the working fiddle

Upvotes: 8

enguerranws
enguerranws

Reputation: 8233

To scroll to a particular element on the page, the element must have an ID :

<a class="scroll" href="#myElement">Link</a>
<div id="myElement"></div>

This anchor will make the document scroll to the top of the element #myElement.

Then animate it with JS :

$('a.scroll').click(function(){
  var href = $(this).attr('href');
  var dest = $(href).offset().top;
  $('html, body').animate({
    scrollTop: dest;
  }, 1000);
  return false;
});

Upvotes: 1

David Hellsing
David Hellsing

Reputation: 108500

The standard way is to use named anchors:

<a href="index.html#section">section</a>

This link will navigate to index.html and the browser will scroll to the element with ID or NAME section if it exists, f.ex:

<section id="section"></section>

It also works for the name attribute, but it’s rarely used these days:

<section name="section"></section>

If you want jQuery to animate this behaviour, it’s a good idea to start with the standard implementation above, then add some enhanced functionality, f.ex:

$('#menubar').on('click', 'a', function(e) {
    e.preventDefault(); // prevents default scrolling
    var y = $(this.hash).offset().top; // grabs the #id element offset location
    $('html,body').animate({scrollTop: y}); // animate the scroll
});

Upvotes: 1

Mouhamed Halloul
Mouhamed Halloul

Reputation: 209

check out the scrolTo in jquery

take a look at this : http://demos.flesler.com/jquery/scrollTo/

Upvotes: 0

Related Questions