Question

这真的不应该那么难。对于我的网站，我使用的PNG已经映射为我的导航栏，上面有7个链接。导航栏固定在页面的顶部中间。该网站是一个单页，有7个部分，全部高2000像素。当我点击其中一个导航链接时，我非常想让我的页面平滑滚动，但到目前为止，我发现这是不可能做到的。所有jquery平滑滚动脚本都涉及到锚点，我无法将其置于图像映射中。

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

正如你所看到的，没有地方可以放置＆＃34; a＆＃34;标记在地图中。如果我把它放在＆＃34; area＆＃34;链接不再可点击。我无法把它放在＆＃34; href＆＃34;在＆＃34;区域内＃34;标记，因为它不起作用。没有锚点，每个jquery脚本都无法正常工作。

没有Javascript，没有其他方法可以顺利滚动吗？这是一项非常简单的任务，似乎有很多令人费解的解决方案＆＃34;。

请不要发布任何你能找到的流畅的滚动脚本，我已经测试了其中的15个没有成功。

这是我目前的脚本部分：

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        $("#homeButton").click(function() {
$('html, body').animate({
scrollTop: 0 }, 1000);
});

        $("#newsButton").click(function() {
$('html, body').animate({
scrollTop: $("#News").offset().top
}, 2000);
});

        $("#aboutButton").click(function() {
$('html, body').animate({
scrollTop: $("#AboutUs").offset().top
}, 2000);
});

        $("#contactButton").click(function() {
$('html, body').animate({
scrollTop: $("#Contact").offset().top
}, 2000);
});

        $("#musicButton").click(function() {
$('html, body').animate({
scrollTop: $("#Music").offset().top
}, 2000);
});

        $("#photosButton").click(function() {
$('html, body').animate({
scrollTop: $("#Photos").offset().top
}, 2000);
});

        $("#linksButton").click(function() {
$('html, body').animate({
scrollTop: $("#Links").offset().top
}, 2000);
});
        });
    </script>

Answer 1

我相信javascript不会允许简单流畅的滚动，但html过渡肯定会:) HTML5有很多关于动画/过渡的好教程。

顺便说一下，我给以后的东西添加了书签，也许它可以做得很好： http://mynameismatthieu.com/WOW/

Answer 2

基本理念是这样的：
在您的<area>代码

中添加ID

<area id="newsButton" shape="rect" coords="76,0,150,48" href="#News" alt="News" />

然后使用一点jQuery：

$(document).ready(function () {
  $("#newsButton").click(function() {
    $('html, body').animate({
      scrollTop: $("#News").offset().top
    }, 2000);
  });
});

在此处查看小型演示：jsFiddle

<小时/> 更详细：
在<head></head>部分中添加jquery。然后在关闭</body>代码之前使用以下代码：

<script type="text/javascript">
$(document).ready(function () {
    $("#homeButton").click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 2000);
    });
    $("#newsButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#News").offset().top
        }, 2000);
    });
    $("#aboutButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#AboutUs").offset().top
        }, 2000);
    });
    $("#contactButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Contact").offset().top
        }, 2000);
    });
    $("#musicButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Music").offset().top
        }, 2000);
    });
    $("#photosButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Photos").offset().top
        }, 2000);
    });
    $("#linksButton").click(function () {
        $('html, body').animate({
            scrollTop: $("#Links").offset().top
        }, 2000);
    });
});
</script>

没有锚点的平滑滚动和带有图像映射的导航栏

2 个答案: