0

I am aware of the below function, which will scroll to a defined element when a page is loaded:

$(document).ready(function () {
    // Handler for .ready() called.
    $('html, body').animate({
        scrollTop: $('[class-name]').offset().top
    }, 'slow');
});

However, I would like this function to run only when the page is accessed by the <a class="[class-name]" href="[destination-url]" </a> currently in a banner on the home page, which is there temporarily to bring attention to some information on the destination page.

I don't want this function to run when the same page is accessed via the main sidebar menu, or other links.

How would I go about this?

Xanthippus480
  • 7
  • 4
  • Does this answer your question? [Smooth scroll to div id jQuery](https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery) – Snm Aug 13 '22 at 16:01

2 Answers2

0

When you want an element to be slow-scrolled to when navigated to from another page, change those links on the other page to add a search parameter. For example, instead of the link ending in example.html, make it end in example.html?scrollto=foo. Then, on the destination page, see if the scrollto exists, and if it does, scroll to an element with that class.

const params = new URLSearchParams(window.location.search);
const paramsObj = Object.fromEntries(params.entries());
if (paramsObj.scrollto) {
    $('html, body').animate({
        scrollTop: $('.' + paramsObj.scrollto).offset().top
    }, 'slow');
}
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • That looks like what I need, but I am working with wordpress and therefore the url does not end in a .html/.php etc. simply "www.[homepage].co.uk/[page]. Would the URL search parameter still work in this case? I have tried simply appending ```?scrolltoo=foo``` but no luck. – Xanthippus480 Aug 13 '22 at 16:56
  • Sure, it'll work with any path, as long as you have the ability to adjust the href to account for the search parameters – CertainPerformance Aug 13 '22 at 16:57
  • Hi @CertainPerformance, I ended up using Mitul's code below, which worked fine for my purposes. For my knowledge, would I be right in thinking that your code looks for `scrollto` in the search parameters, whereas the below searches the entire URL for the designated string? – Xanthippus480 Aug 19 '22 at 14:32
  • Yes, I was trying to make as general solution as possible. Using query parameters instead of `.includes` ensures that it'll work no matter what the main part of the URL is. `?scrolltoo=foo` won't work because the name must be `scrollto` - you have an extra `o`. The approach in my answer will also work for *any* element you want to scroll to, from any page - just put the class name of the element as the `scrollto` value in the ``, rather than hard-coding the element to scroll to in the JS. – CertainPerformance Aug 19 '22 at 20:41
0

It's simple, below assumption taken that you want to implement this code in below link

https://example.com/xyz.html?scroll=true

so here code be like this.

 if(window.location.href.includes('scroll=true')
       {
        $('html, body').animate({
              scrollTop: $('[class-name]').offset().top
         }, 'slow');
   }
Mitul
  • 42
  • 6