Jquery, select and scroll next element

Question

I've got a newbie jQuery question. I need to add a number of tiny text boxes with links to scroll up and down any overflowed content.

I've got it to work as follows, but need to rework it to handle repeated boxes of text on the page.

Javascript..

$(function() {
    $('a.scrolldown').click(function(event) {   
    event.preventDefault();
    $(".mytextbox").scrollTop($(".mytextbox").scrollTop() - 20);
    });
});

With the markup...

<div class="news_col">
    <p class="newscontrols">
     <a class="scrolldown" href="#">down </a><a class="scrollup" href="#">up</a></p>
     <div class="news_item_text mytextbox">
      <p>Loren ipsum...</p>
     </div>
</div>

I realise I could use maybe the 'next' selector but need a bit of help rewriting it.

Adil · Accepted Answer · 2013-05-16 12:29:39Z

1

You can use next() with $(this) to access the textbox after the .scrolldown anchor.

$(function() {
    $('a.scrolldown').click(function(event) {   
       event.preventDefault();
       $mytextbox = $(this).next(".mytextbox");
       $mytextbox.scrollTop($mytextbox.scrollTop() - 20);
    });
});

answered May 16, 2013 at 12:29

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reg T Over a year ago

Thanks. Tweaked the markup with 'up' and 'down' <a> tags before and after the text container, using next() and prev().

Collectives™ on Stack Overflow

Jquery, select and scroll next element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related