Перенаправить на div на другой странице с плавной прокруткой?
Вопрос:
У меня есть сайт на 2 страницы. Обе страницы используют одну и ту же страницу masterlayout.cshtml, в которой есть Navbar. В Navbar имеется ряд ссылок, которые прокручиваются вниз до соответствующих разделов на первой странице на основе их идентификаторов.
Проблема:
Когда я обращаюсь ко второй странице, я больше не могу перенаправлять на указанные div из ссылок Navbar на первой странице. Это имеет смысл, поскольку фокус уже не на первой странице, но как мне обойти эту проблему?
Код:
Вот код Navbar с установленным идентификатором div, обратите внимание на атрибуты data-id, определяющие, какой div прокручивается до:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" data-id="features">Club</a></li>
<li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
Пример div, который прокручивается до:
<div id="Welcome">
//HTML
</div>
JQuery используется для прокрутки до соответствующего div:
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
Если кто-то может помочь с появлением жизнеспособного решения, позволяющего вызывать этот идентификатор с другой страницы, которая была бы большой.
Ответы
Ответ 1
Это можно сделать с помощью файлов cookie. Настройка файла cookie с id, который вы хотите прокрутить, а затем, когда загружается новая страница, прочитайте файл cookie и прокрутите список до id. Я использовал очень популярный плагин jquery-cookie.
Вот код JavaScript:
$(document).ready(function () {
// Read the cookie and if it defined scroll to id
var scroll = $.cookie('scroll');
if(scroll){
scrollToID(scroll, 1000);
$.removeCookie('scroll');
}
// Handle event onclick, setting the cookie when the href != #
$('.nav a').click(function (e) {
e.preventDefault();
var id = $(this).data('id');
var href = $(this).attr('href');
if(href === '#'){
scrollToID(id, 1000);
}else{
$.cookie('scroll', id);
window.location.href = href;
}
});
// scrollToID function
function scrollToID(id, speed) {
var offSet = 70;
var obj = $('#' + id);
if(obj.length){
var offs = obj.offset();
var targetOffset = offs.top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
}
});
Здесь я подготовил минимальный пример:
http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview
Примечание. Нажмите Events, чтобы перейти на другую страницу.
Ответ 2
Вы можете отслеживать хеш страницы URL и прокручивать страницу до определенного div
<a href="#Welcome" class="scroll-link">Welcome</a>
<a href="your_page_url#Welcome" class="other-page">Welcome</a> <!-- link to other page scroll div -->
Jquery
$(document).ready(function(){
var speed = 1000;
// check for hash and if div exist... scroll to div
var hash = window.location.hash;
if($(hash).length) scrollToID(hash, speed);
// scroll to div on nav click
$('.scroll-link').click(function (e) {
e.preventDefault();
var id = $(this).attr('href');
if($(id ).length) scrollToID(id, speed);
});
})
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = obj.top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
Ответ 3
Как вы перенаправляетесь на другую страницу, используя href значение?
Если это так, добавьте также data-id для этого тега <a>.
Итак, когда вы нажмете ссылку "События", она перейдет на другую страницу html и вы хотите прокрутить до "События div", правильно?
Затем, используя sessionStorage, вы можете сохранить и вернуть идентификатор страницы, а затем прокрутить до своего определенного div.
Добавьте ниже script и посмотрим.
JQuery
$(document).ready(function(){
// get sessionStorage for page id
var get_id = sessionStorage.getItem('pg_id');
// check page id, then scroll to its div
if(get_id)
scrollToID(get_id, 300);
// click event to scroll to div
$('.nav li a').on('click', function(){
var id = '#'+$(this).data('id');
sessionStorage.setItem('pg_id', id);
scrollToID(id, 300);
});
});
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
HTML (Мой пример)
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" data-id="features">Club</a></li>
<li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='page2.html' data-id="Event">Events</a></li>
<!-- use your script to redirect to another page, but add "data-id" -->
</ul>
Ответ 4
Вы можете попробовать что-то вроде этого. Я изменил идентификатор данных на id. Вы можете использовать javascript.
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="features">Club</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="About">About Us</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="Location">Location</a></li>
<li><a href='#' onclick="scrollme(this.id)" id="Event">Events</a></li>
</ul>
Javascript для прокрутки
function scrollme(id)
{
var scrollElem = scrollableElement('html', 'body');
var targetOffset = $(id).offset().top;
$(scrollElem).animate({scrollTop: targetOffset-100}, 1000, function() {
});
}
function scrollableElement(els)
{
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
Ответ 5
Если я понимаю, что вы имеете в виду. Чем вы можете просто сделать это, что такое iFrame.
В Navbar для каждой вкладки просто поместите a href='#welcome' или href='#features' и дайте iFrame для welcome a ID of welcome. Когда вы нажимаете на вкладку для welcome. Вы будете отправлены в iFrame с содержимым welcome. Для features выполните те же и все следующие вкладки.
Ответ 6
Самый простой способ - создать еще одну навигационную панель для другой страницы, откуда вы хотите перенаправить своих конечных пользователей.
попробуйте следующее:
создайте файл first.php или first.html
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.t{
min-height: 200px;
border: 2px solid;
}
</style>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" data-id="features">Club</a></li>
<li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
<div id = 'Welcome' class="t">
</div>
<div id = 'features' class="t">
</div>
<div id = 'About'class="t">
</div>
<div id = 'Location' class="t">
</div>
<div id ='div_101' class="t">
scroll upto here
</div>
<script>
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(document).ready(function(){
var param_scroll = getParameterByName('id');
if(param_scroll){
$('html, body').animate({
scrollTop: $("#"+param_scroll).offset().top
}, 3000);
}
});
</script>
Затем второй файл с другой навигационной панелью
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="first_page.php?id=Welcome" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="first_page.php?id=features" class="scroll-link" data-id="features">Club</a></li>
<li><a href="first_page.php?id=About" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="first_page.php?id=Location" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
Ответ 7
Я думаю, вы можете использовать $.cookie каждый раз, когда вы прокручиваете первую страницу.
Пример:
$(document).ready(function()
{
$('.scroll-link').on("click",function()
{
$.cookie('page',$(this).attr('data-id'));
});
if($.cookie('page') != null || $.cookie('page') != "")
{
scrollToID($.cookie('page'), 1000);
}
})
Ответ 8
Вы можете отправить идентификатор div, который вы хотите прокрутить, на вторую страницу через строку запроса URL и написать script (на странице 2), чтобы прочитать URL-адрес и прокрутить до указанного div.
Кусок торта.
