- 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/
有人可以告诉我 Bootstrap、Twitter Bootstrap 和 Bootstrap 3 之间有什么区别吗? 最佳答案 在 CSS 框架的上下文中,Bootstrap 和 Twitter B
什么是 Bootstrap 文档中的屏幕阅读器??? >>> bootstrap document 不知道什么是屏幕阅读器? 最佳答案 它是视力不佳或由于某种原因无法从屏幕上阅读的人使用的工具;它会向
我想更新网站上的 Bootstrap,但我不知道安装的版本。 如何仅使用 bootstrap.css 和 bootstrap.min.js 文件来识别 bootstrap 版本? CSS 文件中没有版
很抱歉问了这么一个愚蠢的问题,但我真的不清楚这些。 Bootstrap 是一个非常棒的库,它节省了开发人员的大量工作。 因为它提供了很多功能,比如 节省大量时间。 响应式功能。 一致的设计。 便于使用
我正在使用 ng2-bootstrap对于 Angular 2 项目。 这个包同时支持Bootstrap 3和4,我安装后默认使用Bootstrap 3。我没有找到任何关于切换的信息。 如何从 Boo
我计划在我的项目中使用 Bootstrap 4 和 angular 4,但我对 npm install --save @ng-bootstrap/ng-bootstrap 和 npm install
单击删除按钮后,我设置了警报。 但它的默认高度更大,我想让它更小(高度)。 我试过 display-4 属性(property),但它没有工作。 我已通过 w-50 将宽度设置为屏幕的一半,但警报的一
我使用 Bootstrap 按钮下拉菜单来显示表单。我通过调用 stopPropagation 禁用了单击时消失的下拉菜单(当用户操作表单时) .表单的元素之一是下拉列表。如果我使用 native h
twitter-bootstrap 中的“bootstrap”一词是什么意思?在许多 gem 中都有“bootstrap”这个词。我搜索了其中的含义,但无法得出结论。那么有人可以在这种情况下给出“Bo
由于 Bootstrap 5 不再使用 jQuery 并且正在使用 vanilla JS,我想知道是否仍然建议使用 Bootstrap-Vue,不管 Bootstrap-Vue 还不支持 Bootst
我正在使用 codeigniter 框架,我正在使用 bootstrap typeahead,一切都很好,但我的问题是当我将它放在 bootstrap 模式中时,bootstrap typeahead
我刚刚完成安装 bootstrap 5 版本 ^5.0.0-alpha1并在 app.js 中导入 Bootstrap import "bootstrap" 其他.js var myModal = n
我一直在尝试在使用选项卡的页面上实现 ScrollSpy。 这是我的 body 标签: 这是我的标签 HTML: Home Profile
如果您选择使用 Bootstrap-Xtra,您是否应该也包括原始的 bootstrap.css,或者 bootstrap-xtra.css 应该是一个完整的替代品。 例如,bootstrap-xtr
我正在使用 bootbox 创建一个对话框。 bootbox.dialog({ message: 'Datepicker input: ', title: "Custom label"
我正在将使用 Bootstrap 构建的 Web 应用程序迁移到 React 和 react-bootstrap,两者都很棒。我在 react-bootstrap 中没有看到的一件事是如何顺利集成 B
我正在使用 Bootstrap 3 RC,默认按钮是带有黑色文本的深灰色,而不是带有黑色文本的浅灰色。我已经尝试过 CDN 链接和离线。我还清空了我的浏览器缓存以防万一。有没有其他人经历过这个?这可能
在我的一个项目中,我曾经有 bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput沿着 bootstrap-2.3
下拉菜单在 Angular-UI-Bootstrap 中不起作用?使用 Bootstrap-3 CSS 以下是代码。链接Click me for a dropdown出现。但不会在点击时切换。怎么了?
如何在 Bootstrap Table 中添加 Bootstrap 按钮 最佳答案 我已经想出了解决办法。我想和大家分享。 这是我的 table : # Visit
我是一名优秀的程序员,十分优秀!