jQuery 使用平滑滚动重定向到不同页面上的 div？

Question

提问by user1352057

Question Background:

问题背景：

I have a 2 page website. Both pages use the same masterlayout.cshtmlpage 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.

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

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?

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

Code:

代码：

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

这是设置了 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>

Example of a div that is scrolled to:

滚动到的 div 示例：

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

The JQuery used to Scroll to the relevant 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);
        }

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.

如果有人可以帮助提出一个可行的解决方案，以便能够从不同的页面调用这些 ID，那就太好了。

Answer 1

采纳答案by lmgonzalves

This can be done with cookies. Setting a cookie with idyou 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.

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

Here is the JavaScript code:

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

Here I have prepared a minimal example with this working:

在这里，我准备了一个最小的例子：

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

Note: Click on Eventsto nav to the other page.

注意：点击Events导航到其他页面。

Answer 2

回答by Ashish Bhagat

You can track hash of page url and scroll page to particular div

您可以跟踪页面 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);
}

Answer 3

回答by yeyene

How do you redirect to another page, using hrefvalue?

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

If so, also add in data-idfor this <a>tag too.

如果是这样，也data-id为这个<a>标签添加。

So when you click on Events link, it will go to another html page and you want to scroll to Events div, right?

因此，当您单击 Events 链接时，它会转到另一个 html 页面并且您想滚动到 Events div，对吗？

Then using sessionStorage, you can store and get back the page id, then scroll to its specific div.

然后使用sessionStorage，您可以存储并取回页面 ID，然后滚动到其特定的 div。

Add below script and let's see.

添加下面的脚本，让我们看看。

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 (My sample)

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>

Answer 4

回答by Shafeeque

You can try something like this. I have changed data-id to id. You can use javascript.

你可以尝试这样的事情。我已将数据 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 to scroll

用于滚动的 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 [];
}

Answer 5

回答by Roy Berris

If I understand what you mean. Than you can just do this what an iFrame. In the Navbar for each tab just put a href='#welcome'or href='#features'and than give the iFrame for welcomea IDof welcome. When you click on the tab for welcome. You will be send to the iFrame with the welcomecontent. For featuresdo the same and all following tabs.

如果我明白你的意思。比你能做到这一点的 iFrame 是什么。在每个选项卡的导航栏中，只需放置一个href='#welcome'or ，href='#features'然后为welcomea IDof提供 iFrame welcome。当您单击选项卡时welcome。您将与welcome内容一起发送到 iFrame 。对于features做同样的和所有的下列选项卡。

Answer 6

回答by PHP Worm...

Simplest way is to create another nav bar for other page from where you want to redirect your end users

最简单的方法是为要重定向最终用户的其他页面创建另一个导航栏

try this:

尝试这个：

create a file first.php or first.html

创建一个文件 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>

Then second file with different nav-bar

然后使用不同的导航栏的第二个文件

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

Answer 7

回答by IBAD GORE

I guess you may use $.cookieevery time you scroll on the first page.

我猜您$.cookie每次滚动第一页时都可以使用。

For Example :

例如：

$(document).ready(function()
{
    $('.scroll-link').on("click",function()
    {
       $.cookie('page',$(this).attr('data-id')); 
    });
    if($.cookie('page') != null || $.cookie('page') != "")
    {
        scrollToID($.cookie('page'), 1000);
    }
})

Answer 8

回答by uz4ir

You can send the ID of the div, that you want to scroll to, to the second page through a URL query string and write a script (in page 2) to read the URL and scroll to the specified div. Piece of cake.

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

jQuery 使用平滑滚动重定向到不同页面上的 div？

提问by user1352057

采纳答案by lmgonzalves

回答by Ashish Bhagat

回答by yeyene

JQUERY

查询

HTML (My sample)

HTML（我的示例）

回答by Shafeeque

回答by Roy Berris

回答by PHP Worm...

回答by IBAD GORE

回答by uz4ir

相关推荐

最近更新

标签

jQuery 使用平滑滚动重定向到不同页面上的 div？

提问by user1352057

采纳答案by lmgonzalves

回答by Ashish Bhagat

回答by yeyene

JQUERY

查询

HTML (My sample)

HTML（我的示例）

回答by Shafeeque

回答by Roy Berris

回答by PHP Worm...

回答by IBAD GORE

回答by uz4ir

相关推荐

从 iframe 元素访问 jQuery 数据

jquery dataTables - 如何提取行数据 onclick 事件

jQuery 获取“无法读取未定义引导程序的属性”偏移量“

jQuery 如何在按钮单击时显示自定义对话框

相关推荐

最近更新

标签