back button and scroll to specific picture in library

Hello Everyone,

I am a bit confused of how to approach a problem best practice.

I have a library site of vector-pics. They are all displayed in rows with 6 columns. and like 20 rows or something.

When you click a vector you get to another page with details just for that vector. On this site I want a button saying something like 'take me back to library!' - When that button is pushed I want to take the user back to previous page and scroll them to the position of the vector they clicked.

I am considering using this: http://plugins.jquery.com/scrollTo/ I have the ID if the vector on the page where the button will be. But how do I best pass the id over from the '1-vector page' back to the library page where I'll use it in my js?

Thanks in advance!

Nash

8 years ago

Best Answer

Level 20

You could set a hash in your URL (for example, http://example.com/library#vector45), check for it in your JS code and scroll to the target. Something like:

var hash = window.location.hash; // get #vector45 from URL
if (hash) {
    $.scrollTo(hash);
}

theFinalArbiter

8 years ago

Level 7

@Nash Thank you! I like it. I do have several categories of vectors.

mydomain.com/people mydomain.com/cars ...

the routes are /people and /cars etc. How could I get around that if I want to get to the people library but also attaching a hash?

Nash

8 years ago

Level 20

Many possibilities. Something like

<a href="{{ url()->previous() }}#{{ $vectorId }}">Back to library</a>

should do the trick. If you have access to the category slug in your view, you can also use that instead of url()->previous(), e.g. {{ url($category) . '#' . $categoryId }}

1 like

Please or to participate in this conversation.