javascript - 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/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis/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;
}

Here's the HTML code:

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

    <script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis./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;
}

Share Improve this question edited Dec 26, 2013 at 17:18 Pranav C Balan 115k25 gold badges171 silver badges195 bronze badges asked Dec 26, 2013 at 17:10 Sander van Hooff 451 gold badge2 silver badges7 bronze badges

Maybe it is better and easier to explain this without using my code, because it may take some time to implement it in the code aswell. But I'll see every help is great! – Sander van Hooff Commented Dec 26, 2013 at 17:11
Note that your are using a HTML4 declaration, but that you are using HTML5 elements. You should use a HTML5 declaration instead of the transitional one. – Bram Vanroy Commented Dec 26, 2013 at 17:21

Add a ment |

4 Answers 4

Sorted by: Reset to default 8

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

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
});

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;
});

check out the scrolTo in jquery

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

4 Answers 4

与本文相关的文章

评论列表(0)