jquery – 重定向到不同页面上的div,平滑滚动?

前端之家收集整理的这篇文章主要介绍了jquery – 重定向到不同页面上的div,平滑滚动?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题背景:

我有一个2页的网站。两个页面都使用具有导航栏的相同的masterlayout.cshtml页面。在Navbar中有一些链接,它们根据ID的ID向下滚动到第一页的相关div。

问题:

当我访问第二页时,我不能再从第一页上的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>

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);
        }

如果有人能够提出一个可行的解决方案,以便能够从不同的页面调用这些id,那将是伟大的。

解决方法

这可以通过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,speed);
        }
    }
});

这里我准备了一个最小的例子,这个工作:

http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview

注意:单击事件导航到另一页。

原文链接:https://www.f2er.com/jquery/182136.html

猜你在找的jQuery相关文章