Scroll To Top Button question

#1

Hi,

I am using the Scroll to Top Button, but instead of going all the way to the top of the website (Hero Bloc), I would like to go back to the top of the Dynamic area where I have my menu.
Can I do something in Blocs or I have to modify the script when the project has been exported ?

Thank you
Chris

#2

Hi chrishsl, I’m only a few hours into Blocs but some early response might be useful. I have seen there are options on a dropped Button to navigate to various places. You might have to define a target position too.

#3

I was going to suggest you identify the id in the side panel for the bloc you want as the scroll to destination, then click on the scroll to toggle menu and select that id. In theory that should work, but then I tried it in 2.6.4 and it didn’t… Maybe one for @Norm

#4

Thank you @jamesGW & @Flashman, but the Scroll to Top Button is an option you tick in your page settings, so you don’t have the option to choose the id of the bloc…

52

#5

OK a slight misunderstanding. That refers to the small box with the arrow that you see on pages as you scroll down to provide a sort of elevator option taking you to the top. To do as you wish I think that would need to be edited somehow.

I was talking about the option of scrolling to a specific place from a link via text or a button. If you create a link, one if the options allows you to select a location, however this would be from a fixed element, rather than floating as you scroll down the page. There may well be a workaround for this, but nothing springs to mind.

#6

Following more detailed suggestions from Flashman, got it to work OK. Can scroll upwards from a button at bottom of the dynamic area to the top of the dynamic area, across more than a screenful.

Selection of target block was a challenge, but clicking alongside the top-of-bloc + sign did show Bloc info in sidebar. Entered a custom ID (default #bloc-N seemed unsuitable, it looks like N is bumped on each new added-bloc no mater what position in layout).

So now have a more refined option than ‘Scroll to Top Button’ Page Option. Can scroll to (the top of) any Bloc, perhaps even insert a dummy one for the purpose. Generic button can (I assume) be customised in size and label to suit, maybe even color.

Thanks for the learning exercise!

#7

@chrishsl, I imagine you could utilize an icon of that up arrow (caret symbol?) and use the “scroll to target” feature to target your navigation Bloc. You’d need to place that element in its own Bloc and give it a unique name id. set the position of that element to “fixed” in the css and then adjust also the horizontal and vertical position on the page using “bottom:” and “right:” etc. You can either add a css style to the page (in page settings) or link to an external style sheet by attaching it in project settings.

#8

Hi Guys, if your feeling advanced the best but not the easiest way to manage this would be to change the scroll to top functions after export. You can find this file in js/blocs.js . After this scroll down to the line that says function scroll to target. This is the function that is responsible for the scroll to target abilities. If you then replace the name of the class names that are there for the class name of the bloc you would like to scroll up to then it should work. Give it a try and let me know how you get on :slight_smile:

16
Screenshot 2018-11-04 at 11.38.16.png1340x111 20.8 KB

#9

Good option, but the button would appear straight away on the website. What I like with the Scroll to Top Button is that it only appears when you start scrolling down. Im going to try to change the js file as @Blocs_Hosting suggest.

#10

Thank you @Blocs_Hosting, that is what I was looking for but I am not sure to understand everything in your explanations.

If you then replace the name of the class names that are there for the class name of the bloc you would like to scroll up to then it should work

#13

If you are prepared to accept editing an exported file, a simple option seems to be to edit the index.html. [how do I include HTML here?] Near the bottom is a line with…

onclick="scrollToTarget(‘1’)

Change the ‘1’ to ‘#xxxxx’, where xxxxx is the custom ID for the target bloc (mentioned earlier). But this must be done post-export.

I have found a solution by introducing an HTMLwidget at the end of the global footer area, with that line of HTML and edit already made for targetting the custom ID. So, no post-export editing. PageSettings still require the Scroll To Top Button to be set ON to generate the normal chevron’d button. By some magic, the HTML widget version seems to override the original target and you end up with just what you wanted. However, I’d experiment a bit more first.

#14

Awesome, thank you @jamesGW, it works that way and only takes 2 secondes to change!

#15

@Blocs_Hosting, are you fairly knowledgeable of Javascript programming? I’m often needing some help with Javascript, php, etc and like to keep a “short list” of developers who I can call for different projects. If you are, and are willing to collaborate ocassionally, I’ll keep you in mind!

#16

I like to think I am knowledgable in these areas as I work for a company that specialises in building websites using javascript and PHP. If you need me for anything give me a shout :slight_smile: