130
Views
9
Comments
Solved
How to use a bottom to scroll to a section of the same page?
Application Type
Reactive
Service Studio Version
11.53.31 (Build 61742)

I'm trying to have a capability to scroll from the hero section to another section of the same page with a buttom click. Is it possible? I need to use a link? I did the research and I only have old exemples from tradicional web and it not fit in reactive way. I'm not pro so please if you can help me with a module context I'll be gratefull.

Thank you


Screen Shot 2022-12-27 at 20.57.35.png
2022-12-09 04-50-17
Shubham Doshi
Solution

Hello Olliver,

You can simply use 'Section Index' widget which is available in the reactive app to navigate within the same page


2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Oliver,

For your use-case, you can give a try using the ScrollToElement utility action, available under the OutSystemsUI module as highlighted below.



Kind regards,

Benjith Sam

2022-12-03 22-44-14
Olliver

Hi Benjith Sam,

thanks for your feedback, I think this widget is not available for web app I've tried to access it but unfurtnatly it shows within the dependencies as checked but it's not avaivalable at the tool bar's widgets. 

best regards, 


Oliver

Screen Shot 2022-12-28 at 01.47.14.png
2022-12-09 04-50-17
Shubham Doshi
Solution

Hello Olliver,

You can simply use 'Section Index' widget which is available in the reactive app to navigate within the same page


2022-12-03 22-44-14
Olliver

Thank you for replying,

It's working but I've got an issue, how can I get rid of this white bar that always show when the page is redered. Did I made some mistake?


Screen Shot 2022-12-28 at 02.32.09.png
2022-12-09 04-50-17
Shubham Doshi

It shows what you have selected. Just like a link, if you select it, underline gets added to the link. Its similar behavior. You can always hide it using CSS.  

2022-12-03 22-44-14
Olliver

I've tryed but I'm not founding the class to hide it.

I found this class and aply this to overwrite a padding:

.osui-section-index-item {    padding-left: 0;   }

https://personal-mptqqyhw.outsystemscloud.com/PersonalLoan/LandingPage?_ts=638077944680322640

2022-12-09 04-50-17
Shubham Doshi

Did it hide that line?

2022-12-03 22-44-14
Olliver

Yes I found the css class. I’ve just set the bar width 0px 

Thank you 🙏 

2022-12-09 04-50-17
Shubham Doshi
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.