Welcome to the in5 Answer Exchange! This a place to get answers about in5 (InDesign to HTML5) and make requests.
0 votes
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!
in how_to by (220 points)
Did you find a solution. I have same question :)
An interesting question! I'll have to think about it.
Thanks, it would be appreciated!

1 Answer

0 votes
Best answer

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.

by (197k points)
edited by
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!