How to make an anchor link to a section inside a modal?

Design help Animations & Interactions
1

Hello everyone!
I have a modal with several sections, which opens when I click on the links from the list (1,2,3 …). How to make it so that when I click on a specific link block it opens the modal and scroll to the corresponding section inside the modal?

Here is my: public share link
Here is: published project

2

Hi @Galaktik, I think this is only possible with custom code. Something like this might work.

$('.course-link').on('click', function(){
  var num = $(this).children('.text-block').text();
  var scroll = $('#num').scrollTop();

  $('.modal').scrollTop(scroll);
})
3

Hi! Thks for the answer!
I pasted this code, and renamed the section class to “text-block”, and set the section ID, but it didn’t work. Unfortunately, I don’t know JS and I don’t fully understand how this code works. Most likely I’m doing something wrong …

image
image890×628 54 KB

image

4

Hi @Galaktik, you didnt have to change any class/ID since I wrote the code based on the published link. You can move the code to instead, just right below .

5

I restored the original version and moved the code to the “Before tag” still does not work. All I changed was adding script tags:

<script>
$('.course-link').on('click', function(){
  var num = $(this).children('.text-block').text();
  var scroll = $('#num').scrollTop();

  $('.modal').scrollTop(scroll);
})
</script>
6

I see the problem now, let me just try some other solution.

Edit: could you remove/disable the interaction in course-link for the moment and publish it? What is happening is that the scrollTop() is suppose to get the position of the Numbered Slide. But with the modal hidden, it is 0.

1 Like