Question

当我点击网站该部分的菜单栏中的链接时，我想转到我网站的特定部分，因此您不必滚动浏览所有内容，而是要链接到不同的内容部分。我已经读过你可以用jQuery做这个并为它做一个动画，这样页面就可以顺利地进入网站的那个部分。

以下是 HTML 代码：

    <!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>

这是 CSS 代码：

*{
    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;
}

Answer 1

如果你加载了jQuery，你可以尝试这样，只需要jquery就可以使用插件......

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

这是有效的fiddle

Answer 2

要滚动到页面上的特定元素，该元素必须具有ID：

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

此锚点将使文档滚动到元素#myElement的顶部。

然后用JS：

为它设置动画

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

Answer 3

查看jquery中的scrolTo

看看这个：http://demos.flesler.com/jquery/scrollTo/

Answer 4

标准方法是使用命名锚：

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

此链接将导航至index.html，浏览器将滚动至ID或NAME section的元素（如果存在），f.ex：

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

它也适用于name属性，但现在很少使用它：

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

如果您希望jQuery为此行为设置动画，最好从上面的标准实现开始，然后添加一些增强功能，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
});

如何通过点击链接访问网站的某个部分？

4 个答案: