JavaScript“平滑滾動”不會滾動
[英]JavaScript 'smooth scroll' will not scroll
問題描述
問題背景：
我正在ASP.NET MVC項目中使用Twitter Bootstrap 3開發一個單頁站點。
問題：
我目前正在嘗試實現“平滑滾動”，該滾動應通過從導航欄下拉菜單中單擊來滾動到相關的div。 從導航欄中單擊某個部分時，將其“跳轉”到div而不是滾動。
編碼：
以下是我的“ _Layout.cshtml”標記，其中提供了導航欄和頁腳。 滾動的JavaScript顯示在腳本標簽之間：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script>
$('#nav .navbar-nav li>a').click(function () {
var link = $(this).attr('href');
var offSet = 30;
var targetOffset = $(link).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, 7000);
});
</script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/logo.png" alt="yourLogo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#myCarousel">Projects</a></li>
<li><a href="#Welcome">Welcome</a></li>
<li><a href="#features">Thing</a></li>
<li><a href="#About">About Me</a></li>
<li><a href="#Location">Location</a></li>
<li><a href="#Contact">Contact Me</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="container body-content">
@RenderBody()
</div>
<footer>
<!-- This HTML is outside the other container above i.e its separate. You need a container as this allows you to use bootstrap classes -->
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2014</h6>
</div>
<div class="col-sm-4">
<h6>About Us</h6>
<p>Chia dreamcatcher artisan vinyl Intelligentsia Banksy. Art party whatever cred wolf hella distillery Portland wayfarers Kickstarter, kale chips pug artisan +1 crucifix.</p>
</div>
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="unstyled">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-sm-2">
<h6>Follow Us</h6>
<ul class="unstyled">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</div><!-- end col-sm-2 -->
<div class="col-sm-2">
<h6>Coded with<span class="glyphicon glyphicon-heart"> by Me</span></h6>
</div>
</div>
</div>
</footer>
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
屏幕截圖：
以下屏幕快照顯示，單擊導航欄選項時，頁面將轉到正確的div，但不會滾動。 解決該問題的任何幫助都將非常有用。
3 個解決方案
解決方案1
1 2014-10-16 22:59:44
經過更多的研究並使用這個出色的例子： http : //alijafarian.com/response-page-scrolling-with-jquery-and-bootstrap/我設法提供了下面的解決方案，該解決方案非常有效。
<script>
$(document).ready(function() {
$('#nav .navbar-nav li>a').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("href");
scrollToID(sectionID, 750);
});
function scrollToID(id, speed)
{
var offSet = 70;
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({scrollTop:targetOffset}, speed);
}
});
</script>
解決方案2
-1 2014-10-16 20:22:44
嘗試將“ px”添加到scrolltop：
$('#nav .navbar-nav li>a').click(function () {
var link = $(this).attr('href');
var offSet = 30;
var targetOffset = $(link).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset + "px" }, 7000);
});
或這個 ：
$('#nav .navbar-nav li>a').click(function () {
var link = $(this).attr('href');
var offSet = 30;
var targetOffset = $(link).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, 'slow');
});
我認為您需要在頁面加載后執行它：
$(document).ready(function () {
$('#nav .navbar-nav li>a').click(function () {
var link = $(this).attr('href');
var offSet = 30;
var targetOffset = $(link).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, 'slow');
});
});
解決方案3
-1 2014-10-16 20:24:26
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
摘自：[ http://css-tricks.com/snippets/jquery/smooth-scrolling/]
JavaScript平滑滾動-iPhone
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.