- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经使用 bootstrap 4 有一段时间了。看到了为什么 smoothscroll 应该起作用的多次解释,但我仍然没有找到它!
也许有人可以解释为什么它对我不起作用?或者我的编码有什么问题?
伟大的,杰森
$(document).ready(function(){
let scroll_link = $('.scroll');
//smooth scrolling -----------------------
scroll_link.click(function(e){
e.preventDefault();
let url = $('body').find($(this).attr('href')).offset().top;
$('html, body').animate({
scrollTop : url
},700);
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
return false;
});
});
.masthead {
height: 100vh;
min-height: 500px;
background-image: url('https://source.unsplash.com/BtbjCFUvBXs/1920x1080');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
header {
padding: 156px 0 100px;
}
section {
padding: 150px 0;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Home.css" rel="stylesheet" type="text/css"/>
<title>Iterms Group Europe B.V.B.A</title>
</head>
<body>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Iterms Group</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Voordelen">Voordelen</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Administratie">Administratie</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#DebiteurenBeheer">Debiteuren Beheer</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<header id="Home" class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 style="font-weight: 800;">Administratiekantoor</h1>
<p style="font-weight: 600;">voor bedrijven en particulieren</p>
<br>
<br>
<p>Welkom Iterms Group Europe is een administratiekantoor die U als ondernemer veel werk uit handen kan nemen. Als ondernemer wilt U niets liever dan bezig zijn met uw bedrijf . Maar voor uw bedrijfsvoering heeft U een goede administratie nodig.
Op zelfstandige basis staan wij U ten dienste en kunnen wij U helpen met uw administratie, debiteurenbeheer, enz…
Ook voor tijdelijke werkzaamheden helpen wij U graag voor het wegwerken van achterstanden in uw administratie bij langdurige ziekte of zwangerschapsverlof.
Iterms Group Europe werkt met flexibele uren in het bedrijf van de klant of vanuit onze maatschappelijke zetel op de Fazantenstraat 122 te As.</p>
</div>
</div>
</div>
</header>
<section id="Voordelen" class="bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-8 mx-auto">
<h2 style="color: mintcream">Voordelen</h2>
<p style="color: mintcream" class="lead">Zit U met de volgende vragen en problemen zoals, ik heb nog veel werk en moet nog:</p>
<p style="color: mintcream">Offertes maken en versturen of mijn facturen maken.</p>
<p style="color: mintcream">Nakijken of de klanten al betaald hebben en een aanmaning sturen.</p>
<p style="color: mintcream">Moet ik met deze klant verdere stappen ondernemen?</p>
<p style="color: mintcream">Nakijken waarom ik een aanmaning heb ontvangen en nog betalingen doen.</p>
<p style="color: mintcream">Is mijn personeel op tijd betaald?</p>
<p style="color: mintcream">Mijn personeel is ziek, wat nu?</p>
</div>
</div>
</div>
</section>
<section id="Administratie" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Administratie</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</section>
<section id="DebiteurenBeheer" class="bg-dark">
<div class="container">
<div class="row">
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
<div class="col-lg-8 mx-auto">
<h2 style="color: mintcream">Debiteuren beheer</h2>
<p style="color: mintcream" class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
</div>
</div>
</section>
<section id="Contact" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>Contact</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
</div>
<div class="col-lg-4">
<a href="#">
<img class="img-fluid" src="http://placehold.it/400x400" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Iterms Group Bvba</p>
<p class="m-0 text-center text-white">Website created by Jason Lommelen</p>
</div>
</footer>
<!-- Custom JavaScript for this theme -->
<script src="Js/SmoothScroll.js" type="text/javascript"></script>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
第一行是我的 javascript 代码,第二行是我的 CSS 代码,最后一行是我的 HTML 代码,但它应该可以工作,我认为我一直在以正确的方式添加它。
最佳答案
可以在这里找到答案:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
您使用的是精简版(由 Bootstrap 标准提供),但精简版没有动画功能。所以要修复它只需从 https://code.jquery.com/jquery-3.3.1.slim.min.js 中删除“.slim” .
此外,您确实需要使用“.js-scroll-trigger”而不是“.scroll”,即使您也可以只使用“.nav-link”。
关于javascript - SmoothScroll 导航不适用于 bootstrap 4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54710109/
我在为 MacOSX 构建的独立包中添加 DMG 背景的自定义图标时遇到问题。我在项目的根目录中添加了一个包。正在从中加载自定义图标,但没有加载 DMG 背景图标。我正在使用 Java fx 2.2.
Qt for Symbian 和 Qt for MeeGo 有什么区别?我知道 Qt 是一个交叉编译平台。这是否意味着如果我使用来自 Qt 的库,完全相同的库可以在所有支持 Qt 的设备(例如 Sym
我正在尝试使用 C# .NET 3.5/4.0 务实地运行 SQL Server 数据库的备份。我已经找到了如何完成此操作,但是我似乎找不到用于备份的命名空间库。 我正在寻找 Microsoft.Sq
我最近在疯狂学习 Java,但我通常是一名 .NET 开发人员。 (所以请原谅我的新手问题。) 在 .Net 中,我可以在不使用 IIS 的情况下开发 ASP.Net 页面,因为它有一个简化的 Web
这post仅当打印命令中有字符串时才有用。现在我有大量的源代码,其中包含一条声明,例如 print milk,butter 应该格式化为 print(milk,butter) 用\n 捕获行尾并不成功
所以我的问题是: https://gist.github.com/panSarin/4a221a0923927115584a 当我保存这个表格时,我收到了标题中的错误 NoMethodError (u
如何让 Html5 音频在点击时播放声音? (ogg 用于 Firefox 等浏览器,mp3 用于 chrome 等浏览器) 到目前为止,我可以通过 onclick 更改为单个文件类型,但我无法像在普
如果it1和it2有什么区别? std::set s; auto it1 = std::inserter(s, s.begin()); auto it2 = std::inserter(s, s.en
4.0.0 com.amkit myapp SpringMVCFirst
我目前使用 Eclipse 作为其他语言的 IDE,而且我习惯于不必离开 IDE 做任何事情 - 但是我真的很难为纯 ECMAScript-262 找到相同或类似的设置。 澄清一下,我不是在寻找 DO
我想将带有字符串数组的C# 结构发送到C++ 函数,该函数接受void * 作为c# 结构和char** 作为c# 结构字符串数组成员。 我能够将结构发送到 c++ 函数,但问题是,无法从 c++ 函
我正在使用动态创建的链接: 我想为f:param附加自定义转换器,以从#{name}等中删除空格。 但是f:param中没有转换器
是否可以利用Redis为.NET创建后写或直写式缓存?理想情况下,透明的高速缓存是由单个进程写入的,并且支持从数据库加载丢失的数据,并每隔一段时间持久保存脏块? 我已经搜查了好几个小时,也许是goog
我正在通过bash执行命令的ssh脚本。 FILENAMES=( "export_production_20200604.tgz" "export_production_log_2020060
我需要一个正则表达式来出现 0 到 7 个字母或 0 到 7 个数字。 例如:匹配:1234、asdbs 不匹配:123456789、absbsafsfsf、asf12 我尝试了([a-zA-Z]{0
我有一个用于会计期间的表格,该表格具有期间结束和开始的开始日期和结束日期。我使用此表来确定何时发生服务交易以及何时在查询中收集收入,例如... SELECT p.PeriodID, p.FiscalY
我很难为只接受字符或数字的 Laravel 构建正则表达式验证。它是这样的: 你好<-好的 123 <- 好的 你好123 <-不行 我现在的正则表达式是这样的:[A-Za-z]|[0-9]。 reg
您实际上会在 Repeater 上使用 OnItemDataBound 做什么? 最佳答案 “此事件为您提供在客户端显示数据项之前访问数据项的最后机会。引发此事件后,数据项将被清空,不再可用。” ~
我有一个 fragment 工作正常的项目,我正在使用 jeremyfeinstein 的 actionbarsherlock 和滑动菜单, 一切正常,但是当我想自定义左侧抽屉列表单元格时,出现异常
最近几天,我似乎平均分配时间在构建我的第一个应用程序和在这里发布问题!! 这是我的第一个应用程序,也是我们的设计师完成的第一个应用程序。我试图满足他所做的事情的外观和感觉,但我认为他没有做适当的事情。
我是一名优秀的程序员,十分优秀!