您如何通过单击链接转到网站的特定部分？
[英]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. 我读过您可以使用jQuery并为其制作动画，以便页面可以平滑地转到网站的该部分。
Here's the HTML code: 这是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>
And here is the CSS code: 这是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;
}
4 个解决方案
解决方案1
7 已采纳 2013-12-26 17:15:04
If you have jQuery loaded you could try like this, no plugin required just jquery will do... 如果您已加载jQuery，则可以这样尝试，无需插件，只需jquery即可。
HTML: 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: 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();
});
解决方案2
1 2013-12-26 17:13:58
To scroll to a particular element on the page, the element must have an ID : 要滚动到页面上的特定元素，该元素必须具有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. 该锚点将使文档滚动到元素#myElement的顶部。
Then animate it with JS : 然后用JS制作动画：
$('a.scroll').click(function(){
var href = $(this).attr('href');
var dest = $(href).offset().top;
$('html, body').animate({
scrollTop: dest;
}, 1000);
return false;
});
解决方案3
0 2013-12-26 17:18:07
check out the scrolTo in jquery 在jquery中查看scrolTo
take a look at this : http://demos.flesler.com/jquery/scrollTo/ 看看这个： http : //demos.flesler.com/jquery/scrollTo/
解决方案4
0 2013-12-26 17:19:59
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: 此链接将导航到index.html ，浏览器将滚动到ID或NAME section的元素（如果存在），例如：
<section id="section"></section>
It also works for the name attribute, but it's rarely used these days: 它也适用于name属性，但是最近很少使用：
<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: 如果您想让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
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.