On Click,Redirect to a New Page and Scroll to a Particular Div on That New Page

On click,redirect to a new page and scroll to a particular div on that new page

Your code:

$('.know-more-btn').click(function () {
   if(location.hash == "#Who-We-Are"){
    $('html, body').animate({
    scrollTop: $(".map-section").offset().top
}, 1000);
}
});

New code:

   if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
   }, 1000);


   $('.know-more-btn').click(function () {
      if(location.hash == "#Who-We-Are"){
       $('html, body').animate({
       scrollTop: $(".map-section").offset().top
     }, 1000);
    }
   });

Click on url, redirect to another page and scroll down to hidden anchored div

I've been thinking about it and trying stuff out. I tried out solutions above answered by @ciekals11 and @chrwahl but couldn't get these working. Probably because I am too amateur with js/Jquery.

Anyways my solution looks like this.

$(document).ready(function() {
    if (
        window.location.href == "http://localhost/mypage/secondpage#extrainformation"
    ) {
        $(".tabs h4").removeClass("tab-current");
        $(".tabs ul li:nth-child(4) h4").addClass("tab-current");
        $("#section1").fadeOut();
        $("#section4").fadeIn();
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#extrainformation").offset().top
        }, 1000);

        return false;
    }
});

This probably isn't the best answer but it works. Any other recommendations and solutions are welcome.

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

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.

how to Redirect to a specific div on a different page with smooth scroll

See docs here

       const elem = document.querySelector('#element_id')
       elem.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });

How to redirect to another page and specific div on button click in mvc

You could try something like this:

<button class="js-btn"></button>

$(function(){
    $(".js-btn").on("click",function(){
        window.location = "..../#div3";
    });
})

The string "..../#div3" represent the relative url of your page and at the end has a #div3. This way, using window.location, you would be redirected to the page you want and using #div3 to the section you want.

Scroll to a specific div on a new page using react router dom

As of this issue on github use react-router-hash-link package.

<HashLink to="/pagetwo#div">Home</HashLink>

here is the codesandbox

---

Related Topics