# Method to scroll to bottom on page load **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [April 8, 2025, 9:19pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868 "2025-04-08T21:19:38Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![rfolkes](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@rfolkes](https://forum.inductiveautomation.com/u/rfolkes)\ **Post date:** [April 8, 2025, 9:19pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/1 "2025-04-08T21:19:38Z")
Is there a method to force scroll to bottom for a flex repeater on page load? given view.root.flexRepeater as page layout? ---
**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\ **Post date:** [April 8, 2025, 9:40pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/2 "2025-04-08T21:40:43Z")
I have requested an onLoad event handler: > **[Perspective view onLoad event that fires when the view is done loading |...](https://inductiveautomation.canny.io/ignition-features-and-ideas/p/perspective-view-onload-event-that-fires-when-the-view-is-done-loading)** > > This would be the only clean way of ensuring that, for example, an input .focus() would execute at the right time... https://forum.inductiveautomation. Causing a component to automatically scroll would likely require resorting to JavaScript injection, unless that, too, got implemented as a feature of Perspective. I'm pretty sure that doesn't exist. You might be able to hack it by way of calling `.focus()` on an element at the bottom... ---
**Author:** ![rfolkes](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@rfolkes](https://forum.inductiveautomation.com/u/rfolkes)\ **Post date:** [April 9, 2025, 4:54pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/3 "2025-04-09T16:54:49Z")
i got something that appears to work in initial testing. on template for flex repeater Create a params = Last create a message handler on the bottom item or item you want to focus (must be a visible item) type = focusField script ```python if self.view.params.Last: self.focus() ``` then on page with flex repeater create a custom property with expression binding to your repeater instances (or source for instances) then transform script with - this will cause it to scroll down whenever the instances is updated I think you could also put this within the transform script below this. ```python system.perspective.sendMessage( messageType="focusField", scope="page") ``` for your repeater instances for example I am doing an SQL query to get instance parameters ```python messageList = [] # Convert dataset to a list for index access pyData = list(system.dataset.toPyDataSet(value)) lastIndex = len(pyData) - 1 for i, row in enumerate(pyData): lastValue = True if i == lastIndex else False messageDict = { "MessageID": row["MessageID"], "Last": lastValue } messageList.append(messageDict) return messageList ``` If you want it to only run once on page load and not if instances change then maybe make custom parameter custom.runOnce initial value = True and add if statement to transform script and set to False within the if statement. ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [April 10, 2025, 7:53am UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/4 "2025-04-10T07:53:19Z")
If you need to automatically scroll to the bottom on page load... Then maybe your page is upside down and you should be displaying things in a different order ? I'm not saying that's always the case, but it's something to consider. Simply reversing the order of your flex repeater might be just what you need. ---
**Author:** ![rfolkes](https://avatars.discourse-cdn.com/v4/letter/r/e95f7d/32.png) [@rfolkes](https://forum.inductiveautomation.com/u/rfolkes)\ **Post date:** [April 10, 2025, 3:21pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/5 "2025-04-10T15:21:07Z")
Yeah but it is a chat type thing and trying to replicate (txt messages, teams chat etc) that show the most recent at the bottom. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e9c342c2d3f703ec8c7a082c8b1fe89af120a45.png) ---
**Author:** ![Phil\_B](https://avatars.discourse-cdn.com/v4/letter/p/c89c15/32.png) [@Phil\_B](https://forum.inductiveautomation.com/u/Phil_B)\ **Post date:** [May 21, 2025, 4:23pm UTC](https://forum.inductiveautomation.com/t/method-to-scroll-to-bottom-on-page-load/104868/6 "2025-05-21T16:23:25Z")
I think i have a way to make this work. Essentially i add the new instance on the flex repeater as instance 0 while setting the direction property to column-reverse. I leave the justify to flex-start and both align properties are stretch. To do this i have the following code on the button that adds the instance to the flex repeater. ```python self.getSibling("FlexRepeater").props.instances = [NEW_INSTANCE_OBJECT] + list(self.getSibling("FlexRepeater").props.instances) ``` Notice that you need to put brackets around the new instance you want to add and convert the existing instances to a list. this is to have compatible data types to combine. the one suboptimal thing is that if you add a new instance but arent already at the bottom of the repeater it will not auto scroll back down.