keithwlarson

Our demo website is setup to work on touchscreens at public libraries and science centres. Right now, we notice that users don't seem to notice that there is more content to scroll down to explore. I am trying to improve the UX of the page to have the scroll arrow (and text) float at the bottom of the users browser window, so when they scroll down the arrow follows until they reach the bottom. Ideally, it would turn into an up arrow when the user reaches the bottom of the page. Basically, I do not want the arrow tied to any section, but help the user navigate. I do not see a difference on my screen when I change if from 'absolute' to 'fixed'. It seems to be tied to the bottom of the section on my Square Space 7.1 website.

This works very well for our site, thank you. I managed to easily change the colours of the text and arrows to match our site profile. Is there anyway to have the arrow fixed to the bottom of the browser page of the user of the website, rather than at the bottom of the first section?

It seems that I am maximizing the space available in SquareSpace 7.1.

I can definitely change the size in High Charts. However, I still want to reduce the space top, bottom, left and right of the blog entry. I tried your code and it does not work. Suggestions.

How do I code it so that it uses the default button properties in the SquareSpace settings?

BTW: I currently have a "Back" button on each page, that simply references other pages on the site. This is not ultimately what I wanted. Further, I really want a very small button visible on the page, but not a distraction like the current situation. It is only at the top to make it clear to users on touchscreen tablets who do not automatically think to scroll down to find the page navigation button. If you have better solutions in mind, please do share.

Site URL: https://vizchange.net I have a website where I present climate and weather data visualizations. I have it setup on several tablet and touchscreen computers at a national park visitor center and hotel. I am trying to minimize the scrolling on pages to encourage the website to be explored as much as possible, so I am trying to limit any hurdles on various devices, for example, scrolling. If you go to an example visualization (blog entry), I would like to maximize the space used for the visualization. I would like to reduce the empty space to the left and right of the data visualizations and the space above and below. Each blog page (where the individual visualizations are located) should fit to a screen on any device without or with as little scrolling as possible. I am familiar with CSS coding, but still a novice. I have no spacer blocks and have no side-bar navigation menus. Any suggestions for solving this problem and improving the layout to maximize the user experience with the visualizations is much appreciated. BTW: this is a pilot project!

Site URL: https://vizchange.net I have a website where I present climate and weather data visualizations. I have it setup on several tablet and touchscreen computers at a national park visitor center and hotel. I am trying to minimize the scrolling on pages to encourage the website to be explored as much as possible, so I am trying to limit any hurdles on various devices, for example, scrolling. If you go to an example visualization (blog entry), I would like to add a button that takes the user back a single page. I have found code to do this, but it has limitations. For example, I would like the button to be styled by the SquareSpace site to keep the buttons consistent. Alternatively, if I add a 'button' block then I cannot add CSS/HTML code to the button, only navigation to a specific page. I would like simply to have the user go "back" one page in the browser history. Suggestions?