滾動瀏覽到不同的頁面並返回相同的位置
[英]scrollspy navigate to different page and back at same position
問題描述
各位網絡愛好者，您好，我希望您能為我解決一個問題。
我正在使用引導程序創建一個網站，該網站使用scrollspy導航至帶有導航欄的頁面部分。 滾動到頁面的一部分時，使URL不顯示"#section-2"的唯一方法是在<head>調用我的JavaScript。
現在的問題...
我試圖添加一個FAQ部分，該部分將完全是另一個頁面，希望將其鏈接回原始頁面的特定部分。
除非重新設置瀏覽器的大小，否則FAQ <a> tag似乎無法正常工作。
那已經是scrollspy的兩個bug了！ 引導程序遇到這么多錯誤是正常的嗎？
下面的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Day & Night | Responsive Web Design
</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js">
</script>
</head>
<body data-spy="scroll" data-target="#myNavbar" data-offset="125">
<nav id="myNavbar" class="navbar navbar-dn navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a class="navbar-brand" style="color:#2c3e50;">
Day
<img src="../images/dnlogoc.png" height="35px"/>
Night
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" style="text-align:center;">
<li class="active">
<a href="#section-1">
About Us
</a>
</li>
<li>
<a href="#section-2">
What We Do
</a>
</li>
<li>
<a href="#section-3">
Our Process
</a>
</li>
<li>
<a href="#section-4">
Our Work
</a>
</li>
<li>
<a href="#section-5">
Get in touch
</a>
</li>
<li>
<a href="/faq">
FAQ
</a>
</li>
</ul>
</div>
</nav>
<div class="container day" style="padding-top:75px;">
<hr>
<h2 class="center" id="section-1">
Web Solutions, LLC
</h2>
<hr>
<div class="row">
<div class="col-lg-4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.
</p>
</div>
<div class="col-lg-4" style="text-align:center;">
<img src="../images/dnlogoc.png" height="200px" class="mainimg">
</div>
<div class="col-lg-4">
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
</div>
<p>
Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.
</p>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-2">
What We Do
</h3>
<hr>
<div class="row">
<!-- Boxes de Acoes -->
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-map-marker">
</i>
</div>
<div class="info">
<h3 class="title">
Local Search Engine Optimization
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-laptop">
</i>
</div>
<div class="info">
<h3 class="title">
Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" class="hover" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-lg-4 smallpad">
<div class="box">
<div class="icon">
<div class="image">
<i class="fa fa-mobile">
</i>
</div>
<div class="info">
<h3 class="title">
Responsive - Mobile Friendly Web Design
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper.
</p>
<div class="more">
<a href="#" title="Title Link">
Read More
<i class="fa fa-angle-double-right">
</i>
</a>
</div>
</div>
</div>
<div class="space">
</div>
</div>
</div>
<!-- /Boxes de Acoes -->
</div>
</div>
<div class="container night">
<div class="page-header" style="text-align:center;" id="section-3">
<h2>
Our Process
</h2>
<h3>
</h3>
</div>
<ul class="timeline">
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-search">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Planning
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-th-list">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Content
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<p>
Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.
</p>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-pencil">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Design
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-wrench">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Development
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
<hr>
</div>
</div>
</li>
<li class="timeline">
<div class="timeline-badge mybadge">
<i class="glyphicon glyphicon-cloud-upload">
</i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">
Test & Launch
</h4>
</div>
<div class="timeline-body">
<p>
Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="container day">
<hr>
<h3 class="center" id="section-4">
Our Work
</h3>
<hr>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-searok.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Searok Charters
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-nicor.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Nicor
</cite>
</footer>
</blockquote>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 myimg">
<img src="../images/after-cmt.jpg" class="img-responsive">
<blockquote class="blockquote">
<footer>
<cite title="Source Title">
Castle Mountain Team
</cite>
</footer>
</blockquote>
</div>
<hr>
</div>
</div>
<hr>
<div class="container" style="text-align:center;">
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-right">
</i>
</div>
<div class="col-xs-6">
<h2 class="center">
<button type="button" class="btn btn-primary btn-lg btn-block">
All my our work
</button>
</div>
<div class="col-xs-3">
<i class="fa fa-5x fa-arrow-left">
</i>
</div>
</h2>
</div>
<footer style="text-align:center;">
<div class="container night nopad">
<hr>
<h3 class="center" id="section-5">
Let's talk about your project!
</h3>
<hr>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="tel:4073497036">
<i class="fa fa-phone">
</i>
(407) 349-7036
</a>
</h2>
<hr>
</div>
<div class="col-lg-4 col-xs-12 nopad" style="text-align:center;">
<!-- Place this tag where you want the widget to render. -->
<div class="g-page" data-width="200" data-href="//plus.google.com/u/0/106333335696092351517" data-theme="dark" data-rel="publisher">
</div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="col-lg-4 col-xs-12">
<hr>
<h2>
<a href="mailto:rob@dnwebdev.com">
<i class="fa fa-envelope-o">
</i>
rob@dnwebdev.com
</a>
</h2>
<hr>
</div>
<div id="footer" class="day" style="text-align:center;">
<div class="col-lg-12 col-xs-12">
<p>
Day & Night Web Solutions, LLC
</p>
</div>
</div>
</div>
</footer>
<script>
function close_toggle() {
if ($(window).width() <= 768) {
$('.nav a').on('click', function () {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 100;
} else {
var offset = 115;
}
$('.navbar li a').click(function (event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
</body>
</html>
2 個解決方案
解決方案1
1 已采納 2014-05-07 05:14:34
您有一個jQuery函數，它迫使每個菜單鏈接滾動到該部分。 你需要告訴函數為所有菜單鏈接做到這一點，除了常見問題 ，並重定向如果FAQ點擊，你這樣做：
//trim the spaces and check if the text of the menu link is not equal to 'FAQ'
if ($.trim($(this).html()) != 'FAQ') {
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
} else {
//if it is, redirect to the page
window.location.href = $(this).attr('href');
}
編輯：
來自評論：
當嘗試鏈接回時，我使用“”； 通過在網址中添加＃section-2可以消除滾動問題。
由於我們在頁面重定向上可以使用的功能有限，因此解決起來非常棘手。 但是，您可以這樣做：
首先，完全刪除此函數$('.navbar li a').click(function(event) { ，然后將此代碼放在其他腳本的頂部：
$("document").ready(function() {
$(document).on('click','.navbar li a',function(event) {
alert($(this).html());
event.preventDefault();
if($.trim($(this).html())!='FAQ'){
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
}
else
{
window.location.href = $(this).attr('href');
}
});
//document.referrer returns the url from which this page has been entered,
//we will use this to check if we are redirected from FAQs page
var previous_url = document.referrer;
if(previous_url=='http://dnwebdev.com/dev/faq/'){
//if we were redirected from FAQ page, we would have a #section-value in our url
//hash here fetched that value
var hash = document.URL.substr(document.URL.indexOf('#')+1);
//this is the important part, we are gonna trigger that the
//#section-value passed in url is _clicked_. And so the browser will
//scroll down to that section
$('.navbar li a#a-'+hash).trigger('click');
//once it scrolls down, this deletes the #section-value from url
history.pushState('', document.title, window.location.pathname);
}
});
為了使上述方法起作用，您還需要向每個<a>標記添加id屬性，例如：
<a href="#section-1" id="a-section-1">
<a href="#section-2" id="a-section-2">
等等
關於trigger如何工作的一些演示： 演示
解決方案2
0 2014-05-07 05:23:59
將ID賦予第一個div，例如dynaDiv，並將<a href="/faq"> FAQ </a>修改為<a href="/faq" onclick='addFAQ();'> FAQ </a>定義函數如
function addFAQ(){
$("#dynaDiv").load("./faq.html");
}
如果用戶單擊后退瀏覽器按鈕，我們可以導航到其他頁面嗎？
[英]Can we navigate to a different page if the user clicks on the back browser button?
使用focus（）函數導航到同一頁面的“不同”選項卡中的元素
[英]Navigate to element in Different tab of same page using focus() function
導航到選擇下拉菜單中的同一頁面，而無需清除控件？
[英]navigate back to same page on select-dropdown selection without clearing down controls?
有沒有辦法使無法在StackNavigator中導航回頁面？
[英]Is there a way to make unable to navigate back to page in StackNavigator?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.