Can I link to another part of a long page?

Question

I've created a long page which is longer than one iPad page.  Can I have a button on the top part of the long page that links to an object on the lower half of the page? I've tried hyperlinks, but these will only work when directed to a second page.

Thanks for any advice!

Comments

Did you find a solution. I have same question :)

---

An interesting question! I'll have to think about it.

---

Thanks, it would be appreciated!

Answer 1

You can now do so in version 2.3. Here's how:

1. Create small text frame at the top left of were you want to link (e.g. half way down the page)
2. Insert your text cursor and add a bookmark using the Bookmark panel - it should have an anchor icon
3. Create a button and add a Go to Destination action
4. Choose the anchored bookmark as that location

This technique will work with the Baker and Liquid State PS ouput options.

---

Edit: Starting in version 2.5, this technique works in all page formats.

Comments

Will work this in the slider horizontal format in the future?

---

We might be able to get this working with the slider in the future as well.

---

Is there an update on whether this would be possible when used with horizontal slider format? or is there a work around using a different method with this format?

---

Not yet. I'll see what we can do.

---

We've come up with a workaround as we needed a 'back to top' combined with 'go to next state' on a mso on a long page. Using insert html for both the button and the target (similar to your bookmark solution above):

target: <a id="target"></a>

back to top/next state button:
<a data-loop="1" data-click-next="mso id goes here"><img src="" data-src="assets/images/invisBtn.png" style="width:60px;height:60px;"/></a>

Then we added this to the in5.config.js:

$('[data-click-next]').each(function(index,el) {
        $(el).on(clickEv, function(e){  
            var loop = ($(this).attr('data-loop') == '1');
            $.each($(this).attr('data-click-next').split(','), function(i,val){ nextState(val, loop); });
           
            $('html, body').animate({
                scrollTop: $('#target').offset().top
            }, 500);
           
            return false;
    }); });

This works really well, scrolling smoothly to the target when you click/tap the next state button. You just need to do a test export to get the id's for the multi state objects from the exported html first.

---

Nice job, algray! Glad you've got something you're happy with.

---

Hi algray, as of v2.5 this feature is available in the Slider format as well.

---

I just started to test this out and I notice there is a visible opaque yellow square that appears for about 3 seconds around the area of the bookmark/anchor (see attached image). It appears in all browsers.

Any idea what this is/how to stop it?

---

Add the following CSS as a Resource file and it will hide that rectangle:

.in5-highlight { display:none; }

---

Thanks, Justin!

---

Circling back to this, I placed the code (I named it hide-yellowLinkBox) into each of my presets (I have 4 of them). It is looking to me like each time I run an export, the code keeps getting added to the resource list. Is this normal? 

---

Hmm...I've not seen something like that. I would suggest deleting them (all but one) from that section. If it persists, reach out to us with the files for testing: https://ajarproductions.com/pages/contact.php

---

Looking at this more closely, the replication of the resource code happens when I select a preset and click 'Apply selected' (I have been assuming that is the process for applying a selected preset.)

Contrary to my above statement, it doesn't happen each time I run an HTML5 export.

Note that if I just keep outputting at the '[Last Document Export]' setting, the resource code replication does not happen. 

I guess the expected/desired behavior would be that each Preset has its settings, and when you select and apply it, it just becomes the parameters that were set up in the preset when it was originally created. It should not be adding anything, or at least the HTML Exports window shouldn't have anything changed in the various available setting tabs in that window other than what was created/designated in the preset selected.

Here is a video of what happens. 

---

Thanks! Very helpful. I'll see if we can get that fixed in the future.