平滑滚动实现使用图像映射导航条

我目前正尝试在网站上使用平滑滚动，但有一个固定的导航栏，已被图像映射。不幸的是，这似乎使使用锚不可能。我还使用了章节，看起来它们不能被命名为锚。

此外，每当我尝试实现任何jquery版本的平滑滚动，我可以找到，它不工作。谁能解释一下如何将代码格式化为HTML5?

<style type='text/css'>
        body {
            margin: 0;
        }
        section {
            display: block;
            background: #6699ff;
            height: 2000px;
        }
        .header-cont {
            width: 100%;
            position: relative;
            top: 0px;
            text-align: center;
            padding-top: 15px;
        }
        .header {
            margin: 0px auto;
        }
        .navbar-cont {
            width: 100%;
            text-align: center;
            position: fixed;
            top: 160px;
            z-index: 10000;
        }
        .navbar {
            margin: 0px auto;
        }
        .content-a {
            width: 100%;
            position: relative;
            text-align: center;
            padding-top: 90px;
        }
        </style>
<body>
    <div class='navbar-cont'>
        <div class ='navbar'>
            <img src='NavBar.png' alt ='Navigation Bar' width="619" height="48" usemap="#NavMap"/>
            <map id="NavMap" name="NavMap">
                <area shape ="rect" coords ="1,0,70,48" href="#" alt="Home"/>
                <area shape ="rect" coords ="76,0,150,48" href="#News" alt="News"/>
                <area shape ="rect" coords ="158,0,264,48" href="#AboutUs" alt="About Us"/>
                <area shape ="rect" coords ="270,0,370,48" href="#Contact" alt="Contact"/>
                <area shape ="rect" coords ="375,0,450,48" href="#Music" alt="Music"/>
                <area shape ="rect" coords ="455,0,550,48" href="#Photos" alt="Photos"/>
                <area shape ="rect" coords ="555,0,615,48" href="#Links" alt="Links"/>
            </map>
        </div>
    </div>
    <section id='Home'>
        <div class='header-cont'>
            <div class='header'>
                <header>
                    <img src='SkycoLogoHeader.png' alt='Skyco Logo'/>
                </header>
            </div>
        </div>
        <div class="content-a">
            <img src="HomeText.png" alt="Home Text"/>
        </div>
    </section>
    <section id='News'>
        <div class='header-cont'>
            <div class='header'>
                <img src='SkycoNewsHeader.png' alt='News'/>
            </div>
        </div>
    </section>
    <section id='AboutUs'>
        <div class="header-cont">
            <div class="header">
                <img src="SkycoAboutHeader.png" alt="About Us"/>
            </div>
        </div>
    </section>
    <section id='Contact'>
        <div class="header-cont">
            <div class="header">
                <img src="SkycoContactHeader.png" alt="Contact"/>
            </div>
        </div>
    </section>
    <section id='Music'>
        <div class="header-cont">
            <div class="header">
                <img src="SkycoMusicHeader.png" alt="Music"/>
            </div>
        </div>
    </section>
    <section id='Photos'>
        <div class="header-cont">
            <div class="header">
                <img src="SkycoPhotosHeader.png" alt="Photos"/>
            </div>
        </div>
    </section>
    <section id='Links'>
        <div class="header-cont">
            <div class="header">
                <img src="SkycoLinksHeader.png" alt="Links"/>
            </div>
        </div>
    </section>
</body>

我一直在使用的脚本:

 <script>
            var jump=function(e)
{
   e.preventDefault();
   var target = $(this).attr("href");
   $('html,body').animate(
   {
           scrollTop: $(target).offset().top
   },2000,function()
   {
           location.hash = target;
   });
}
$(document).ready(function()
{
   $('a[href*=#]').bind("click", jump);
   return false;
});
        </script>

明白了。然后试试这个:

首先，将除导航栏以外的所有内容都包含在div、main或section标签中。这样的:

<div class="main">
</div>

现在，在你的JS中改变这一行

$('a[href*=#]').bind("click", jump);

$('.main a[href*=#]').bind("click", jump);

相关内容

最新更新

热门标签：