javascript - 使用图像映射导航栏实现平滑滚动-6ren

javascript - 使用图像映射导航栏实现平滑滚动

转载作者：太空宇宙更新时间：2023-11-03 18:01:36

25

4

我目前正尝试在站点上使用平滑滚动，但使用已进行图像映射的固定导航栏。不幸的是，这似乎使得无法使用 anchor 。我也在使用部分，看起来它们不能被命名为 anchor 。

此外，每当我尝试实现我能找到的任何 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);

关于javascript - 使用图像映射导航栏实现平滑滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25391249/

25

4

0

文章推荐： C# "WindowState.ToString"会在不同文化之间改变吗

文章推荐： Ruby - 按小时/天操作时间/日期时间？

文章推荐： c# - 将匿名类型传递给 MVC ViewData.Model 是否安全？

文章推荐： ruby - 自动化 Web 访问和 Watir

c++ - 映射/设置迭代器不是可取消引用的 C++ 映射
请看一下我的代码。 int main () { Program* allcommand = new Program; allcommand->addCommand("add", new
c++ - typedef 映射、for 循环调试断言、映射/设置不兼容
因此，当我遇到调试断言时，我正在编写代码。现在我很想知道为什么这段代码不起作用: for(Model::MeshMap::iterator it = obj1->GetMeshes().begin()
java - 组、收集器、映射(整数到字符串)、映射(映射到对象)
这是我上一个问题的延续 Group, Sum byType then get diff using Java streams . 按照建议，我应该作为单独的线程发布，而不是更新原始线程。因此，通过我
javascript - JQuery 映射 vs Javascript 映射 vs For 循环
我正在实现一些非常适合 map 的代码。但是，我要迭代的列表中有大量对象，所以我的问题是哪种方法是解决此问题的最佳方法: var stuff = $.map(listOfMyObjects, some
不同类成员函数指针的C++映射
我正在尝试创建一个包含不同类的成员函数指针的映射。成员函数都具有相同的签名。为了做到这一点，我所有的类都继承了一个 Object 类，它只有默认构造函数、虚拟析构函数和一个虚拟 ToString()
具有相同键类型和不同项目类型的c++映射
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: how do you make a heterogeneous boost::map? 有可能在 C++ 中
Mysql WHERE IN 映射
我有一个 Mysql 查询，请检查以下内容: SELECT `tbl_classSubjects`.`classID` , `tbl_classSubjects`.`sectionID` , `tbl
JNA直接与接口(interface)映射？
抱歉，这可能是一个基本问题。 JNA直接映射和接口(interface)映射有什么区别？我的解释是否正确: 直接映射 : 直接使用库对象(如 Java 中的静态 main) 接口(interface
以部分函数为值的 Scala 映射
在 Twitter's Scala school collections section ，它们显示了一个带有偏函数作为值的 Map: // timesTwo() was defined earlie
FFMPEG channel 映射
很难说出这里问的是什么。这个问题是模棱两可的、模糊的、不完整的、过于宽泛的或修辞的，无法以目前的形式得到合理的回答。如需帮助澄清这个问题以便重新打开它，visit the help center .
具有原始类型值类型的 Scala 映射
据我了解，从 scala stdlib 声明一个映射并没有将其专门用于原始类型。我要的不是付出装箱/拆箱的代价，而是同时拥有scala map 的接口(interface)。一个明显的选择是使用 tr
没有键路径的数组的 Restkit 映射
如何为这样的 JSON 响应创建对象映射，它只是一个整数数组: [ 565195, 565309, 565261, 565515, 565292, 565281, 566346, 5
NHibernate DTO 映射
是否可以为 DTO 对象创建映射然后查询它们而不是域？如果不解释为什么？如果我需要几个 dtos 怎么办？ DTos 是只读的 ID 由 NH 自动生成将来这些 dtos 将设置映射到链接的 d
包含混合类型值的 Scala 映射
我有一个返回的函数(常规代码) [words: "one two", row: 23, col: 45] 在 Scala 中，我将上面更改为 Scala Map，但随后我被迫将其声明为 Map[Str
python - 映射 - 特征重要性与标签分类
我有一组与 Vanilla 磅蛋糕烘焙相关的数据(200 行)，具有 27 个特征，如下所示。标签caketaste是衡量烤蛋糕的好坏程度，由 bad(0) 定义, neutral(1) , good
复杂连接的 Hibernate 映射
我有试图映射到新代码的遗留代码。 OLD_PERSON pid sid name age NEW_PERSON pid sid fid age RESOLVE_PERSON pid fid statu
带有鉴别器的 hibernate 映射
我有一个表，其中一个字段可以指向其他 3 个表之一中的外键，具体取决于鉴别器值是什么(Project、TimeKeep 或 CostCenter。通常这是用子类实现的，我想知道我有什么注意子类名称与
Haskell:映射 runST
我有一个类型 [ST s (Int, [Int])] 的绑定(bind)我正在尝试申请runST使用映射到每个元素，如下所示: name :: [ST s (Int, [Int])] --Of Cou
子类和连接子类的 NHibernate 映射
在我正在进行的项目中，我有以下实体:分析师、客户和承包商。每个都继承自基类 User。 public abstract class User { public virtual int Id
用户输入的 Vim 映射
我想知道是否可以在 Vim 中创建一个映射(对于普通模式)，允许用户在映射执行之前输入。我想为我最常用的 grep 命令创建一个快捷方式的映射。我希望命令允许输入我正在搜索的内容，然后在输入时执行。

首页

博学

6Ren·AI

商城

javascript - 使用图像映射导航栏实现平滑滚动