How to make the screen scroll by clicking on a <a> tag

Asked

Viewed 1,457 times

0

On the page of a product there are two links: 1 with the amount of comments that already exist for the product and another saying "Write a comment". Further down on the page there is a "tab" tab with the comments part. When you click on the link it triggers the comments tab, but it doesn’t slide the screen until then it looks like the link doesn’t even do anything. What needs to be done to make this link have these two functions at the same time?

Note: I have tried to simply put #tab-review on href DOES NOT WORK

Link Code:

<a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $reviews; ?></a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $text_write; ?></a></p>

Page link: https://www.lupmed.com.br/bandagem-dynamic-tape-preto-5

php javascript html html5

4 answers

1

Puts the #Tad-review ID in your link reference.

Ex: 

<a href="#tab-review" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $reviews; ?></a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $text_write; ?></a></p>

  • Doesn’t work :(

  • Then it may be that onclick is preventing href... tries to put by your jQuery on onclick: window.location.href='#tab-review';

  • Didn’t work :(

  • Caraca bixo, a third alternative I see is to use scrollTop in your onlick... $('html, body'). scrollTop(0); Ai exchanges '0' for the amount of pixel you want to scroll down.

  • how does it exactly?

  • I’ll add a new answer here, Father.

Show 1 more comment

1


Try to create a function in the click and call all actions within it, example:

<a href="javascript:void(0)" onclick="scrollToComentarios()">Escreva um comentário</a>

<script>
function scrollToComentarios() {
    if ($('.product-tabs').length != 0) {
        $('a[href=\'#tab-review\']').trigger('click');
        $('#input-name').focus();  // adiciona foco ao primeiro input do form de comentarios
        $("html, body").animate({
            scrollTop: $('.product-tabs').offset().top
        }, 1000);
    }
}
</script>
  • 1

    It worked just like I needed it. Thank you very much!

  • Is it possible to leave the input "triggered" too? So the user doesn’t need to click

  • Yes, I edited the answer with this new element

0

  • No, it doesn’t work. I’ve tried that

  • error appears or simply does not redirect?

  • No error appears

  • If you are using Bootstrap you can do this, put it in the paragraph to be directed for the user to be directed to the link next to the title <a class="anchorjs-link " href="#css" Aria-label="Anchor" data-anchorjs-icon="#" ></a>

  • If this does not help try to remove the script from your link and just leave the html msm link

  • Is there any way to create an answer with this? I don’t really understand how to do it

  • If you take the Script he doesn’t do what I need, man

Show 2 more comments

0

Buddy, since the other alternatives didn’t work out, you can use Scrolltop together on your onclick. The comic is: 

$('html, body').scrollTop(0);

Suppose the place you want to go down is at 1200px from the top, then puts that amount in place of zero:

$('html, body').scrollTop(1200);

In your code, it would look like this:

<a href="#tab-review" onclick="$('html, body').scrollTop(**1200**); $('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $reviews; ?></a> / <a href="" onclick="$('a[href=\'#tab-review\']').trigger('click'); return false;"><?php echo $text_write; ?></a></p

  • And how do I respond to that? It’s like?

  • Yes, you better call a function and put the conditions inside it... Ex: if it’s desktop > descend to 1200px, if it’s mobile > descend to 1700px

Browser other questions tagged php javascript html html5

You are not signed in. Login or sign up in order to post.