Jquery to upload page after click button

Asked

Viewed 445 times

1

Good morning friends,

I’ve been searching for days for a "page up" function, when the user clicks a button.

Only find options "add Back to Top button", but I do not want to add a button, I want the button to make the page go up. Type "select", and when the user selects the page goes up.

Someone knows that kind of function and can point me to some material?

I was trying to do it this way. haha

$document(onclick)function(){   
    $("[name='Selecionar']");
    window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

Now:

<script>
$(document).ready(function() {
   $('.list_options.hotels .hotel_block .rooms_options > .price').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 1000);
        event.stopPropagation();
    });
});
</script>
  • I don’t understand your problem. What differentiates "top page" of "top"? Is there an example or website that does this to show us?

  • Actually I don’t want to add a "back to top" button. I have several "select" buttons and I need the page to go up when he clicks one of these.

  • Then it would be like "top", only instead of the page going up to the top it goes up to a specific element?

  • No, no. I’m sorry... I’ll send you the website link and you’ll see the select buttons. Today they go green when clicked, but I would like the page to go up when the customer clicked on them. https://bit.ly/2okGReI Climb to the top in case.

  • You want, by clicking "select", page to go up to the top. But that’s exactly a back-up button. It’s still confusing. It seems to me that adding one href="#algum-elemento" would solve your problem

  • So... the big problem is I don’t have access to HTML.

  • Have you tried window.scrollTo(0, 0) ?

  • 1

    If you don’t have access to HTML vc at least you have access to JS files, or is it possible to include some JS in your site? From what I noticed all btns Sleciona has class="Purchase", so Bast vc include on your page a Script that picks up when some element with class="Purchase" is clicked the page scrolls to the top. But for that you will have to at least include a script on the page. I’ve noticed that your page has jQuery, it makes it even easier...

  • Yes! I do have how to add JS in WP. Would that be the function that the above brother quoted? window.scrollTo(0,0) ?

Show 4 more comments

1 answer

1


Gabriel from what we talked about in the comment field I think this is what you need.

If you already have access to the site’s JS, and your project already has jQuery just vc create an event for the btn class for when clicked back to the top of the page.

Follow the example, I left two btns, one higher and one lower, just click on them you go to the top of the page:

$(document).ready(function() {
    $('.price').click(function(event) {
        event.preventDefault();
        $('html, body').animate({scrollTop: 0}, 1200);
        event.stopPropagation();
    });
});
.price .purchase {
    background: #00b0cd;
    background-size: 15px;
    color: #fff;
    font-family: Roboto;
    font-weight: 600;
    text-transform: uppercase;
    padding: '';
    margin: '';
}
p {
    margin: 1000px auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
     
<p class="price"><a href="#" class="purchase" title="Selecionar">Selecionar</a></p>
<p class="price"><a href="#" class="purchase" title="Selecionar">Selecionar</a></p>

   

  • Fantastico Hugo! Just one last question... on js can I select by "title"? Because my fear is the following... I can have other a.Urchase on the site that are not to go up... But, I only have "select" on this page msm.

  • 1

    @Gabrielsalomão yes you can get it like this $('a[title="Selecionar"]') where it is $('.go-top')

  • Brother, it hasn’t worked yet, do you think? haha... This part of the site, it’s very complicated, because I don’t have access to anything... Last week I made a label title change and it worked with Jquery, agr this case is not rolling... I tried switching to window and load instead of ready... I tested all possible selectors to make it work and did not roll.

  • @Gabrielsalomão in the simplest way as the selector .price look if it works. Edit the answer with the script already. You can put the whole path of btn style, in the link you spoke would look something like this $(' .list_options.hotels .hotel_block .rooms_options > .price ') to test tb

  • I noticed that the version of your jQuery is apparently quite old jquery.js?ver=1.12.4 is already in 3.3.1! Sometimes this can also be influencing

  • Well then brother... I glued up there as the code agr and still does not work... I know the selector is correct, because I made a change of "Focus" with CSS on it and it is working, probably because of the msm version of Jquery...

  • @Gabrielsalomão if here works there was to work tb, tested tb with multiple selectors and worked with all... I think the version may be the problem, but I have no knowledge to say. I know for example that jquery.slim.js has some animation limitations, but I don’t believe that’s your problem... https://answall.com/questions/171822/quais-as-diff%C3%A7as-entre-as-vers%C3%B5es-do-jquery-normal-e-o-slim

Show 3 more comments

Browser other questions tagged

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