使用平滑滚动重定向到不同页面上的div？ [英] Redirect to a div on a different page with smooth scrolling?

问题描述

问题背景：

我有一个2页的网站。这两个网页都使用具有导航栏的 masterlayout.cshtml 页面。在Navbar内有许多链接，根据其ID来滚动到第一页的相关div。

问题：

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

代码：

以下是带有div id集的Navbar代码，请注意指定要滚动到哪个div的 data-id 属性： / p>

 < div class =collapse navbar-collapseid =bs-example-navbar-collapse-1> 
< ul class =nav navbar-nav> 
< li>< a href =＃class =scroll-linkdata-id =Welcome>欢迎< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =features> Club< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =关于>关于我们< / a>< / li> 
< li>< a href =＃class =scroll-linkdata-id =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：

 函数scrollToID（id，speed）{
 var offSet = 70; 
 var obj = $（id）.offset（）; 
 var targetOffset = $（id）.offset（）。top  -  offSet; 
 $（'html，body'）。animate（{scrollTop：targetOffset}，speed）; 
 
 $ / code> 

如果任何人都可以提供可行的解决方案这些ID来自不同的页面，这将是非常棒的。

这可以通过cookie来完成。使用 id 设置一个cookie，然后在加载新页面时读取cookie并滚动到 id 。我使用了非常流行的插件 jquery-cookie 。

以下是JavaScript代码：

  $（document）.ready（function（ ）{
 //读取cookie并定义它是否滚动到id 
 var scroll = $ .cookie（'scroll'）; 
 if（scroll）{
 scrollToID（scroll ，1000）; 
 $ .removeCookie（'scroll'）; 
} 
 
 //处理事件onclick，设置cookie时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函数
函数scrollToID（id ，速度）{
 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注意：点击 Events 可导航到其他页面。

p>

Question Background:

I have a 2 page website. Both pages use the same masterlayout.cshtml page which features a Navbar. Within the Navbar is a number of links which scroll down to the relevant divs on page one based on their ID's.

The Issue:

When I access the second page I can no longer redirect to the specified divs from the Navbar links on the first page. This makes sense as the focus is no longer on the first page, but how do I get around this issue?

Code:

Here is the Navbar code with the div id's set, note the data-id attributes specifying which div to scroll to:

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

Example of a div that is scrolled to:

        <div id="Welcome">
             //HTML
        </div>

The JQuery used to Scroll to the relevant div:

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

If anyone can help with coming up with a viable solution to being able to call these id's from a different page that would be great.

解决方案

This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie.

Here is the JavaScript code:

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

Here I have prepared a minimal example with this working:

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

Note: Click on Events to nav to the other page.

这篇关于使用平滑滚动重定向到不同页面上的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！