按钮移动网站内容

问题描述：

我想制作一个菜单，当有人点击我的菜单时，它会将它们移动到他点击的内容，导致网站很长，这样会更容易。任何想法/建议？按钮移动网站内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center"> 
    <tr> 
     <td> 
      <img src="" usemap="#Map" width="650" height="84" alt="plasio.gr" style="display:block; vertical-align:bottom;background-color:#FFD6CC;color:#000000;text-align:center;font-size:20px;font-family: Arial, Helvetica, sans-serif;"></td> 
    </tr> 

    </table> 

    <map name="Map"> 
    <area shape="rect" coords="-51,-2,174,39" href="link1"> 
<area shape="rect" coords="85,53,149,86" href="link2"> 
</map> 
</body> 
</html>

答

你可以做到这一点使用锚链接

使用您可以链接到网站的特定部分锚链接。您可以使用＃标签（＃）在页面内进行链接。当点击链接它会自动转到某个页面的一部分或者一个id或name等于包括hashtag（＃）后，随后的文本

JSfiddle

例

<a href="#link1">Link 1</a> 
<a href="#link2">Link 2</a> 

<div> 
    <a name="link1"></a> 
    Section 1 
</div> 

<div id="link2"> 
    Section 2 
</div>

这对我很好！但是，我怎么能使它中心的地方，我链接的图像？ – 2014-09-26 10:32:01

我不完全明白你的要求。你能详细说明一下吗？ – 2014-09-26 11:13:18

当我点击链接它在我想要的部分，但我希望能够手动移动滚动条的高度是可能的？\ – 2014-09-29 07:38:54

答

尝试this.Maybe你有以下

<div id="part1"> 
    <p>Lorem Ipsum</p> 
</div> 

<div id="part2"> 
    <p>Lorem Ipsum</p> 
</div> 

<div id="part3"> 
    <p>Lorem Ipsum</p> 
</div>

一个与代码调用page.html页要移动到指定的部分做一个<a class="button" href="page.html#part1"">Part 1</a>或

<a class="button" href="page.html#part2"">Part 2</a>

另外，您可以使用像这样的jQuery视差插件https://github.com/IanLunn/jQuery-Parallax或其他https://github.com/balupton/jquery-scrollto

你可以使用jQuery缓动作为你的滚动有一些不错的效果。

按钮移动网站内容

相关推荐