diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index dc628827a..467e79950 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/ui/component/claimListDiscover/view.jsx @@ -63,6 +63,7 @@ type Props = { forceShowReposts?: boolean, languageSetting: string, searchInLanguage: boolean, + scrollAnchor?: string, }; function ClaimListDiscover(props: Props) { @@ -110,6 +111,7 @@ function ClaimListDiscover(props: Props) { forceShowReposts = false, languageSetting, searchInLanguage, + scrollAnchor, } = props; const didNavigateForward = history.action === 'PUSH'; const { search } = location; @@ -468,6 +470,7 @@ function ClaimListDiscover(props: Props) { setPage={setPage} tileLayout={tileLayout} hideFilters={hideFilters} + scrollAnchor={scrollAnchor} /> ); diff --git a/ui/component/claimListHeader/view.jsx b/ui/component/claimListHeader/view.jsx index c6d33b8ed..7689d729f 100644 --- a/ui/component/claimListHeader/view.jsx +++ b/ui/component/claimListHeader/view.jsx @@ -33,6 +33,7 @@ type Props = { hideFilters: boolean, searchInLanguage: boolean, languageSetting: string, + scrollAnchor?: string, }; function ClaimListHeader(props: Props) { @@ -56,6 +57,7 @@ function ClaimListHeader(props: Props) { hideFilters, searchInLanguage, languageSetting, + scrollAnchor, } = props; const { action, push, location } = useHistory(); const { search } = location; @@ -202,7 +204,7 @@ function ClaimListHeader(props: Props) { } break; } - return `?${newUrlParams.toString()}`; + return `?${newUrlParams.toString()}` + (scrollAnchor ? '#' + scrollAnchor : ''); } return ( diff --git a/ui/component/router/view.jsx b/ui/component/router/view.jsx index 2e5b4988b..fdff13deb 100644 --- a/ui/component/router/view.jsx +++ b/ui/component/router/view.jsx @@ -61,8 +61,9 @@ if ('scrollRestoration' in history) { type Props = { currentScroll: number, isAuthenticated: boolean, - location: { pathname: string, search: string }, + location: { pathname: string, search: string, hash: string }, history: { + action: string, entries: { title: string }[], goBack: () => void, goForward: () => void, @@ -108,7 +109,7 @@ function PrivateRoute(props: PrivateRouteProps) { function AppRouter(props: Props) { const { currentScroll, - location: { pathname, search }, + location: { pathname, search, hash }, isAuthenticated, history, uri, @@ -177,9 +178,17 @@ function AppRouter(props: Props) { useEffect(() => { if (!hasLinkedCommentInUrl) { - window.scrollTo(0, currentScroll); + if (hash && history.action === 'PUSH') { + const id = hash.replace('#', ''); + const element = document.getElementById(id); + if (element) { + window.scrollTo(0, element.offsetTop); + } + } else { + window.scrollTo(0, currentScroll); + } } - }, [currentScroll, pathname, search, resetScroll, hasLinkedCommentInUrl]); + }, [currentScroll, pathname, search, hash, resetScroll, hasLinkedCommentInUrl]); // react-router doesn't decode pathanmes before doing the route matching check // We have to redirect here because if we redirect on the server, it might get encoded again diff --git a/ui/page/channelsFollowingDiscover/view.jsx b/ui/page/channelsFollowingDiscover/view.jsx index 1a2e0cdb7..2a8b48a4d 100644 --- a/ui/page/channelsFollowingDiscover/view.jsx +++ b/ui/page/channelsFollowingDiscover/view.jsx @@ -10,6 +10,8 @@ import * as CS from 'constants/claim_search'; import { toCapitalCase } from 'util/string'; import { SIMPLE_SITE } from 'config'; +const MORE_CHANNELS_ANCHOR = 'MoreChannels'; + type Props = { followedTags: Array, subscribedChannels: Array, @@ -119,13 +121,16 @@ function ChannelsFollowingDiscover(props: Props) { ))} -

{__('More Channels')}

+

+ {__('More Channels')} +

{/* odysee: claimIds = PRIMARY_CONTENT_CHANNEL_IDS if simplesite CLD */} );