Search result and anchor jump

8 years ago
5
Topic

Hello

How can I configure a search button on a search form so that the browser jumps to the beginning of the list results ?

In my example the result div ID  is cck1r 

When I click on the SEARCH button I whished the brower adds  #cck1r in the url but I can't get it

thanks for your help

cyril

Get a VIP membership
4229 Posts
Kadministrator
8 years ago
1
Level 1

Try adding #cck1 to custom variables of the search button

8 years ago
0
Level 2

Hi Klas

This is what I did but without any result. It didn't add #cck1r in the url

cyril

97 Posts
Anjo
8 years ago
2
Level 1

Hi,

I've been looking into this as well and I can make it work with script js under "stuff".

window.location.hash = "cck1r";

The problem I have is that it will add ( #cck1r) as soon as the page loads forcing a jump to the anchor. I need to only add the anchor after clicking submit and the page reloads with new search url.

For example using "#list-page" anchor id on list page

When I call the search page via menu link I get (.../directory/education#list-page) which I don't want - however, when I do a search I get (...=0&search=dir_education_search&task=search#list-page) which is when I only want it to happen.

There must be a way to write a script that only adds (window.location.hash) after new url has loaded but I haven't figured this out yet. Possibly by appending the anchor when 'search' variable appears in url.

I'll keep looking for solution but any ideas are welcome.

Thanks

Anjo

97 Posts
Anjo
8 years ago
1
Level 2

Hi,

Found a solution. In the button field edit under"Stuff" adding the following code to Script(js) seems to work. Replace #map for your anchor #cck1r 

$(window).load(function () { if (window.location.href.indexOf("task=search") > -1) { $("html,body").animate({ scrollTop: $("#map").offset().top }, 1000); } });

When it loads the page it looks for url variable 'task=search'. If it's there it triggers the anchor scroll (1000) for a smooth scroll.

Thanks

Anjo

Note: If you searching using a seblod search module, which calls your list with hidden search form, you need to go to search form configuration and set Show Search Form to Prepare for the script to work. You can also only use window.location.hash = "cck1r" in the script box for a straight jump.
8 years ago
0
Level 3

Thanks for the tip!

cyril

Get a Book for SEBLOD