anchor tag smooth scrolling target issue from one page to another page

Question

I have two pages Test1.php and Test2.php. In the Test1 page, I have three links which are called as One, Two, Three. In the Test2 page, I have three section with id which is called as One, Two, Three.

What I am doing is If any user clicks on Link which is in Test1.php then It will redirect on Test2.php and URL will look like test2.php#two. I tried some code but the issue is content are displaying behind on the menu. I need to display below of the menu. Please check out the image what output I am getting and what output I need.

I have links in a test1.php page and when user click on the link the section will display on the second page on the screen. duplicate question link you suggested that will work on current page but that is not my issue.

Test1.php

Test2.php(Getting output)

I need an output like this

Test1.php code here

<a href="test2.php#one">One</a>
<a href="test2.php#two">two</a>
<a href="test2.php#three">Three</a>

Test2.php code here

$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top - 125
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          }

        });

      }

    }
  });

body,html{margin: 0;padding:0;height: 100%;}
  .menu{background-color: #f9f9f9;height: 100px;width: 100%;z-index: 20;position: fixed;top: 0;text-align: center;}
  section{z-index: 1;margin-top: 110px;}

 <div class="menu"> Menu</div>
<section id="one">
 <h2>One</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


</section>
<section id="two">
 <h2>Two</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>


<section id="three">
 <h2>Three</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If I understand you correctly, if you redirect the user to a different page, you need to handle the smooth scroll in page load (check if the url has hash (`#`)), then smooth scroll it. See this question: https://stackoverflow.com/q/16534851/863110 — Mosh Feu, Feb 13 '18 at 12:34
@MoshFeu, Thanks for the reply. Yes, I added the # in the URL. — Naren Verma, Feb 13 '18 at 12:40
No, I know you did. By `check if the url has hash` I mean that the **code** should check if hash exist, then scroll to element. Have you looked on the question I sent? — Mosh Feu, Feb 13 '18 at 12:42
@MoshFeu, Yes, I checked but not able to understand where am I wrong. — Naren Verma, Feb 13 '18 at 12:48
Currently, you are checking in the `click` handler. You need to check on page load (e.g. `$(function() {...`). — Mosh Feu, Feb 13 '18 at 13:05
@MoshFeu, I think there might be some issue with the menu because my menu is fixed. — Naren Verma, Feb 13 '18 at 13:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/165052/discussion-between-mosh-feu-and-narendra-verma). — Mosh Feu, Feb 13 '18 at 13:24
Possible duplicate of [HTML position:fixed page header and in-page anchors](https://stackoverflow.com/questions/4086107/html-positionfixed-page-header-and-in-page-anchors) — CBroe, Feb 13 '18 at 13:28
@CBroe, I am getting an issue from one-page to another and your duplicate question will resolve the issue only on the same page. You have to check my code proper because I already added margin-top:110 to my section class. — Naren Verma, Feb 13 '18 at 15:29
I mention in the description that I have 2 pages and by clicking from one page to display another. — Naren Verma, Feb 13 '18 at 15:32
@CBroe, You have to check my images, I have links in a test1.php page and when user click on the link the section will display on the second page on the screen. duplicate question link you suggested that will work on current page but that is not my issue. — Naren Verma, Feb 13 '18 at 15:38

score 0 · Answer 1 · answered Feb 13 '18 at 13:24

It's a little bit dirty, but the idea is to prevent native anchor scrolling, and enable custom that will consider fixed menu size and position.

$(() => {
  // simulate location
  location.hash = 'a2';

  const anchorId = location.hash.slice(1);

  if (!anchorId) {
    return;
  }

  const $scrollContainer = $('html, body');
  const $menu = $('.menu');
  const $anchorTarget = $(`#${anchorId}`);

  // reset scroll
  $scrollContainer.scrollTop(0);

  // scroll to anchor
  const menuBotton = $menu.offset().top + $menu.height();
  const anchorTop = $anchorTarget.offset().top;

  $scrollContainer.animate({
    scrollTop: anchorTop - menuBotton
  }, 500);
});

.menu {
  position: fixed;
  background-color: #ccc;
  width: 100%;
  text-align: center;
}

.nav,
.menu {
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="menu">
    <a class="menu-link" href="#a1">click 1</a>
    <a class="menu-link" href="#a2">click 2</a>
  </div>
</nav>

<div id="a1">
  <h2>One</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id="a2">
  <h2>Two</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

You are helping me with a single page. That is not my issue. My issue is from one page to another page. Please check my images. I have links in one page and after click on it, the section will display on another page. — Naren Verma, Feb 13 '18 at 15:34
@NarendraVerma, it should work with multi pages as well. The example is for a single page just because it's impossible to simulate 2+ pages behavior here. Check hash on dom content load and scroll to offsetTop of anchored element considering size and position of menu element. That's it. — Yurii, Feb 13 '18 at 17:04

g4ost · Answer 2 · 2018-02-14T19:27:50.113

Use JQUERY animation to ease in drop point and JQUERY cookie to track your click. I put together a sample on plnkr. It will start on index.html and move to index2.html on event click. The script will use jquery cookie to keep track of page navigation. Hope this helps!

plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview

$(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).offset();
        var targetOffset = obj.top - offSet;
        $('html,body').animate({ scrollTop: targetOffset }, speed);
    }
});

Your answer is right but this will work only for a single page. I need from one page to another page. I have links in test1.php and I have to click from the test1.php page and target set in the test2.php page.Please check my images in the question. — Naren Verma, Feb 14 '18 at 05:31
@NarendraVerma Here is an example from plnkr that will hyperlink to another page element with smooth scrolling. http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview — g4ost, Feb 14 '18 at 19:17

score 0 · Accepted Answer · answered Feb 14 '18 at 07:39

Finally, I found my solution here, I don't know it's the correct way to use but it resolved my issue.

I just added the below script and removed my whole script. So it will work on a single page as well as multiple page target.

/** Smooth Scrolling Functionality **/
    var jump=function(e)
    {
        //alert('here');
       if (e){
           //e.preventDefault();
           var target = jQuery(this).attr("href").replace('/', '');
       }else{
           var target = location.hash;
       }

       jQuery('html,body').animate(
       {
           scrollTop: (jQuery(target).offset().top) - 120
       },500,function()
       {
           //location.hash = target;
       });

    }

    jQuery('html, body').hide();

    jQuery(document).ready(function($)
    {
        $(document).on('click', 'a[href*=#]', jump);

        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show();
                jump();
            }, 0);
        }else{
            $('html, body').show();
        }
    });
    /** END SMOOTH SCROLLING FUNCTIONALITY **/

anchor tag smooth scrolling target issue from one page to another page

3 Answers3