Textpattern CMS

#1 2023-08-28 13:11:19

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Bind to the click of all links with a #hash in the href

i use jquery plugin ScrollTo to achieve this and all works fine – clicking on any menu link, it scrolls smoothly to desired place on webpage. but only on a frontpage. i would it to work in section pages as well. is it somehow doable, what you think?

my main menu:

...
<li><a href="/<txp:if_section><txp:section name='<txp:section />' /></txp:if_section>#January">January</a></li>
...

code i use:

$('a[href^="/#"]').click(function(e) {
   e.preventDefault();
    $(window).stop(true).scrollTo(this.hash, {duration:700, interrupt:true});
  });

you can also suggest other solutions if you know

#2 2023-08-28 20:28:25

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,602

Website

Re: Bind to the click of all links with a #hash in the href

A quickfire reply without having done any testing:

1. Don’t both with prefixing your links with a section, just make sure they start with <a href="#your-anchor">…</a> and nothing else preceding it (i.e. no slash).
2. Change $('a[href^="/#"]')… to $('a[href^="#"]')….

I think it’s the forward slash in your click eventHandler that is restricting the handler to links that are on the frontpage only.

---

TXP Builders – finely-crafted code, design and txp

#3 2023-08-30 04:03:50

colak

Admin

From: Cyprus

Registered: 2004-11-20

Posts: 9,012

Website GitHub Mastodon Twitter

Re: Bind to the click of all links with a #hash in the href

Depending on your design smooth scrolling can now be achieved with css.

html {scroll-behavior: smooth;}

---

Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

#4 2023-08-30 08:50:54

Gallex

Member

Registered: 2006-10-08

Posts: 1,289

Re: Bind to the click of all links with a #hash in the href

both solutions work, but colak’s one is so brilliant simple! i think i choose this one

thank you both guys!!