web-dev-qa-db-ja.com

スムーズなスクロールで別のページのdivにリダイレクトしますか？

質問の背景：

2ページのWebサイトがあります。どちらのページも同じmasterlayout.cshtml Navbarを備えたページを使用します。 Navbar内には、IDに基づいてページ1の関連するdivにスクロールする多くのリンクがあります。

問題：

2番目のページにアクセスすると、最初のページのNavbarリンクから指定されたdivにリダイレクトできなくなります。これは最初のページに焦点が合っていないので理にかなっていますが、この問題を回避するにはどうすればよいですか？

コード：

Div idが設定されたNavbarコードを次に示します。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>

関連するdivにスクロールするために使用されるJQuery：

        function scrollToID(id, speed) {
          var offSet = 70;
          var obj = $(id).offset();
          var targetOffset = $(id).offset().top - offSet;
          $('html,body').animate({ scrollTop: targetOffset }, speed);
        }

誰かがこれらのIDを別のページから呼び出すことができる実行可能な解決策を考え出すのを手伝うことができれば素晴らしいです。

jqueryhtmltwitter-bootstraprazorsmooth-scrolling
17
user1352057

これは、Cookieを使用して実行できます。スクロールするidを使用してCookieを設定し、新しいページがロードされたら、Cookieを読み取り、定義されたidにスクロールします。非常に人気のあるプラグイン jquery-cookie を使用しました。

JavaScriptコードは次のとおりです：

$(document).ready(function () {
    // Read the cookie and if it's 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をクリックして、他のページに移動します。

8
lmgonzalves

ページ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);
}
2
Ashish Bhagat

私があなたの言うことを理解したら。これを行うことができるのは、iFrameだけです。各タブのNavbarにhref='#welcome'またはhref='#features'そしてwelcome a ID of welcomeのiFrameを指定します。 welcomeのタブをクリックすると。 welcomeコンテンツと共にiFrameに送信されます。 featuresについては、同じタブとすべてのタブを実行します。

0
Roy Berris

最も簡単な方法は、エンドユーザーをリダイレクトする場所から他のページの別のナビゲーションバーを作成することです

これを試して：

ファイル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>

次に、異なるnav-barを持つ2番目のファイル

<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>
0
PHP Worm...

$.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);
    }
})
0
IBAD GORE

href値を使用して、別のページにどのようにリダイレクトしますか？

その場合、このdata-idタグにも<a>も追加します。

[イベント]リンクをクリックすると、別のhtmlページに移動し、[イベントdiv]にスクロールしますか？

次に、sessionStorageを使用して、ページIDを保存および取得し、特定のdivまでスクロールします。

以下のスクリプトを追加してみましょう。

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>
0
yeyene

このようなものを試すことができます。 data-idを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 [];
}
0
Shafeeque

スクロールするdivのIDをURLクエリ文字列を介して2番目のページに送信し、URLを読み取って指定されたdivにスクロールするスクリプト（2ページ目）を記述できます。ケーキ。

0
uz4ir