通过平滑滚动重定向到不同页面上的 div?

Posted

技术标签:

【中文标题】通过平滑滚动重定向到不同页面上的 div?【英文标题】:Redirect to a div on a different page with smooth scrolling? 【发布时间】:2015-08-11 16:20:18 【问题描述】:

问题背景:

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

问题:

当我访问第二页时,我无法再从第一页的导航栏链接重定向到指定的 div。这是有道理的,因为焦点不再在第一页上,但我该如何解决这个问题?

代码:

这里是设置了 div id 的导航栏代码,注意 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,那就太好了。

【问题讨论】:

您有什么理由使用 data-id 来设置 id 名称吗?你能不能不使用 Welcome 之类的 href @AaronVanston 感谢您的回复。我确实想过自己使用a href,但我收到一条错误消息,指出“无法解析 id 'Welcome'” 如果要在 ID 不存在的页面上显示导航栏,则链接应包含它们所在的文件,例如:欢迎 @AaronVanston 再次感谢您的回复。我尝试指定我的母版页&lt;li&gt;&lt;a href="_Layout.cshtml#Welcome" class="scroll-link"&gt;Welcome&lt;/a&gt;&lt;/li&gt;,但仍然无法解析 ID。 不清楚您提供的这些部分如何相互交互。问题规范也不清楚。什么时候调用scrollToID() 函数? onload? onclick?您是在服务器端还是客户端生成导航链接?导航栏生成的 HTML 是什么?加载“第二页”后,单击时是否出现 javascript 错误? 【参考方案1】:

这可以通过 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 导航到其他页面。

【讨论】:

感谢您的示例。我想要的虽然略有不同。我希望用户单击显示第 2 页上的事件的事件链接,然后当他们单击欢迎链接时,它会重定向回第 1 页并向下滚动到第 1 页上的欢迎 div。 @Imgonzalves 是的,page2 上没有 ID 为 welcome 的 div,这仅在 page1 上。所以我总是需要重定向到page1,然后在page2上滚动到相关的ID。 @Imgonzalves 再次感谢您的宝贵时间。我已经检查了示例,但是当我单击 page2 上的“欢迎”链接时,它确实返回到 page1,但不会向下滚动到 div。 @Imgonzalves 谢谢你的例子确实有效。我尝试编辑示例以删除第二页上的事件 div。如果我删除它,那么滚动到欢迎 div 不再起作用,这是为什么呢? @Imgonzalves 非常感谢您的帮助。通过对您的示例进行一些调整,我可以完全按照我的需要执行此操作。再次感谢您。【参考方案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);

【讨论】:

你好,我在同一页面上有 2 个锚链接和 2 个部分。当我单击其他锚链接时,同一页面没有滚动效果,为什么?如何系统地同时使用 href="#Welcome" 和 href="your_page_url#Welcome"【参考方案3】:

如何使用href 值重定向到另一个页面?

如果是这样,也为这个&lt;a&gt;标签添加data-id

所以当你点击 Events 链接时,它会转到另一个 html 页面并且你想滚动到 Events 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>

【讨论】:

【参考方案4】:

你可以试试这样的。我已将 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 [];

【讨论】:

【参考方案5】:

如果我明白你的意思。比你可以做到这一点的 iFrame。 在每个选项卡的导航栏中,只需输入href='#welcome'href='#features',然后将welcome 的iFrame 设置为IDwelcome。当您单击welcome 的选项卡时。您将被发送到带有 welcome 内容的 iFrame。对于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】:

您可以通过 URL 查询字符串将要滚动到的 div 的 ID 发送到第二页,并编写脚本(在第 2 页中)来读取 URL 并滚动到指定的 div。 小菜一碟。

【讨论】:

以上是关于通过平滑滚动重定向到不同页面上的 div?的主要内容,如果未能解决你的问题,请参考以下文章

通过平滑动画滚动重定向到另一个 URL

如何在 IBM Worklight 中重定向到同一页面但不同的 div/视图?

如何将用户重定向到 div 上的新页面单击 JQuery [重复]

页面重定向后的Jquery函数?

是否最好使用HTTP标头重定向到不同的页面/文档,或者合并动态消息以通知用户拒绝访问?

根据角色将不同的用户重定向到 Keycloak 登录的不同页面