Scrolling on page and on modal

Question

I'm using following scroll function to scroll to an anchor within my page

$(function() {
  $('.hashscroll-main').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top -120
        }, 1000);
        return false;
     }
    }
  });
});

This is woring fine so far.

Then I'm using a bootstrap modal which is alway open to have a scrolling winodw within the main page. This modal has it's own navigation with anchors. So I want to scroll to the anchor point in the modal window with following code

$(function() {
  $('.hashscroll').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('.modal-body').animate({
          scrollTop: target.offset().top 
        }, 1000);
         return false;
      }
    }
  });
});

This result that the scrolling in the modal goes to the end of the modal window and not to the desired anchor point.

The start of my modal html looks like this

<div class="modal hide fade" id="open">
        <div class="nav" style="display:block !important; position:absolute; top:0;">
            <ul class="ship">
                <li><a href="#taras1" class="nav-active hashscroll">MS Taras</a></li>
                <li class="separator">|</li>
                <li><a href="#boreas" class="hashscroll">MS Boreas</a></li>
                <li class="separator">|</li>
                <li><a href="#stanserhorn" class="hashscroll">MS Stanserhorn</a></li>
                <li class="separator">|</li>
                <li><a href="#pegasus" class="hashscroll">MS Pegasus</a></li>
                <li class="separator">|</li>
                <li><a href="#triton" class="hashscroll">MS Triton</a></li>
                <li class="separator">|</li>
                <li><a href="#galibu" class="hashscroll">Galibu</a></li>
                <li class="separator">|</li>
                <li><a href="#silas1" class="hashscroll">Silas</a></li>
            </ul>
        </div>

        <div class="modal-body">
            <div id="taras1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Any hint what I'm doing wrong?

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

You need to account for the position of your modal as well when using target.offset().top.

This means you compute the offset top of your target and subtract the offset top of the scroll container.

For example:

var modalBody = $('.modal-body');
modalBody.animate({
  scorllTop: target.offset().top - modalBody.offset().top
}, 1000);

See this issue.

edited May 23 '17 at 12:01

Community

1
1

answered Aug 31 '16 at 13:38

Christoph

1,544
5
19

I've tried the proposed code...so the modal is now scrolling, but not to the desired anchor position. Any additional hint? – Chris Feb 07 '17 at 09:52

Scrolling on page and on modal

1 Answers1