Redirect to a div on a different page with smooth scrolling?

Question

Question Background:

I have a 2 page website. Both pages use the same masterlayout.cshtml page which features a Navbar. Within the

Answer 1

You can try something like this. I have changed data-id to id. You can use 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

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 2

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.

Answer 3

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

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

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.

Answer 5

You can track hash of page url and scroll page to particular 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 6

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 welcome a ID of welcome. When you click on the tab for welcome. You will be send to the iFrame with the welcome content. For features do the same and all following tabs.