How to preserve smooth scroll?

[Kody-Quintana]

I'm currently doing something like:

func hackyNavigate(newUrl string) {
	app.Window().Call("scrollTo", map[string]interface{}{
		"top":      0,
		"behavior": "smooth",
	})
	app.Window().Get("history").Call("replaceState",
		nil,
		"",
		newUrl,
	)
}

This "works" but it breaks my back button. Can anyone suggest how I can navigate between components without having the window immediately scroll to the top of the page?

[oderwat]

Probably not helpful, but we do not use URL navigation in our apps. It is all state based and that is kept by the main component or in other cases even as global variable. As usual, I am not really into using Go-App with a "frontend based" web browser behavior. I think that misses the point of a PWA framework. I do remember fighting with that "default" behavior in the past and simply avoid it. When I deploy a PWA there is also no "Back" button anyway.

[Kody-Quintana]

Thanks for the reply. The back button isn't a high priority for me, I'm more concerned that I'm missing something in my understanding of this framework.

Disregarding the double back button entries (I could always do something hacky and omit certain paths here) the behavior of the navigation is slightly different when I click on a link who's href is an internal url, vs also adding an OnClick that calls replaceState.

The first difference I noticed is that the smooth scrolling doesn't work (even if I made the OnClick just do the scroll, it just immediately jumps to the top of the page)

Another example I noticed is with OnMount, on some pages I render some markdown to html with goldmark and use this OnMount:

func (b *blogEntryCompo) OnMount(ctx app.Context) {
	selector := "markdown-container"
	container := app.Window().GetElementByID(selector)
	images := container.Call("querySelectorAll", "img")
	idx := 0

	images.Call("forEach", app.FuncOf(func(_ app.Value, args []app.Value) any {

		thisId := fmt.Sprintf("galleryElement-%d", idx)
		args[0].Set("id", thisId)
		b.GalleryIds = append(b.GalleryIds, thisId)

		thisIdx := idx

		args[0].Set("onclick", app.FuncOf(func(_ app.Value, argsInner []app.Value) any {
			b.CurrentGalleryId = thisIdx + 1
			ctx.Update()
			return nil
		}))

		idx++

		return nil
	}))
}

If I navigate to this component with just a regular href and let the engine handle it, this OnMount doesn't do anything. But if I navigate to this page with replaceState the OnMount works as expected

Any ideas of what the difference might be between these two ways of navigating to a page?

[oderwat]

When I remember it right, the framework calls some extra code to make things like scrolling to anchors work when loading or navigating. A "OnClick()" handler does not of course.

We actually only use real href navigation for when the app crashed. Like on the logo of the app to tell the client "click there if nothing else work anymore". As I wrote: I was adding a full-blown frontend routing with URL replacements and adjusting back button behavior in the very beginning of using the framework. For this I had to add stuff like scrolling to elements myself. I am not sure if that code would work today.

When loading pages with content I remember that I did some dispatch in the onMount() (which is called before the code is rendered) that then made the scrolling work. I just opened that 3-year-old project.

app.Handle("scrollToFragment", func(ctx app.Context, a app.Action) {
		// This is being used to scroll to a fragment location if the
		// content got rendered after the navigation took place
		ctx.Defer(func(ctx app.Context) {
			fragment := app.Window().URL().Fragment //a.Tags.Get("fragment")
			if fragment == "" {
				return
			}
			dbg.Log("Fragment navigation triggered for: " + fragment)
			target := app.Window().Get("document").Call("querySelector", "a[name='"+fragment+"']")
			if target.Truthy() {
				// Smooth looks strange actually
				opts := map[string]interface{}{ /*"behavior": "smooth",*/ "block": "start"}
				target.Call("scrollIntoView", opts)
			}
		})
	})

I also found the back button "handling" for the manual navigation which is exactly what you do:

  app.Window().Get("history").Call("replaceState", nil, "", pData.Path)

Now as I see it, my intention with that was to define a router that does access control on the URL level based on a role grid. So a page is not available by the URL in the first place. This is how my PHP framework which I created in the early 2000s and that is still used today handles URLs. Still part of how I "tick" when it comes to routing. This was a novelty in the early internet and brought us some success with SEO, as you had proper URLs and not just "/index.php?something". But back to the actual problem:

Maybe you should clone Go-App into a local repository so you can add some code to the engine and figure out what happens and how you can get the functionality you want.

[Kody-Quintana]

I also considered just using OnClick for everything and not having any href links at all. But one reason I ended up including them was to support middle-clicking pages into new tabs more easily. I really dislike not being able to open several pages into new tabs to refer back to later, but maybe I should experiment more with enabling that behavior in an OnClick function if possible

I will poke around more on a local copy of the repo to see if I can figure out what's going on here, thank you for all your suggestions

[Kody-Quintana]

Still working through this, but for now my hacky workaround is to make the OnClick this in addition to the Href:

	func(ctx app.Context, e app.Event) {
		app.Window().Call("scrollTo", map[string]interface{}{
			"top":      0,
			"behavior": "smooth",
		})
		app.Window().Get("history").Call("pushState",
			nil,
			"",
			newPath,
		)
		ctx.Defer(
			func(ctx app.Context) {
				app.Window().Get("history").Call("back")
			},
		)
	}