Stop page scrolling to the top after the user clicks a read more link

Question

The below function is used on the html page to show/hide more details about a comment. The issue is that when the read more link is clicked, the page always scrolls up to the top, therefore taking the user away from the actual comment they are trying to view.

Would it be correct to try and use return false; in the code block below? if so where?

var collapseIt = function(){

     var collapsedSize = '25px';
   $('.item').each(function() {

    var h = this.scrollHeight;

    console.log(h);
    var div = $(this);

    if (h > 40) {
      div.css('height', collapsedSize);
      div.after('<a id="more" class="item" href="#">Read more</a><br/>');
      var link = div.next();
      link.click(function(e) {
        e.stopPropagation();

        if (link.text() != 'Collapse') {
          link.text('Collapse');
          div.animate({
            'height': h
          });

        } else {
          div.animate({
            'height': collapsedSize
          });
          link.text('Read more');
        }

      });
    }

  });   
};

@Barmar ok, at what point in the code block? if you make the answer I will accept — Dano007, Aug 23 '14 at 07:51
You could also leave the `href` out of your `a`. Or make a `span` out of it. — loveNoHate, Aug 23 '14 at 07:53

score 1 · Accepted Answer · answered Aug 23 '14 at 08:02

Easiest way is to prevent the default action:

link.click(function(e) {
  e.preventDefault();
});

Another way is to return to the scrolled position:

var scrollTop = document.body.scrollTop;

link.click(function(e) {
  document.body.scrollTop = scrollTop;
});

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

Replace your code for adding 'Read More' link with the following line :

div.after('<a id="more" class="item" href="#!">Read more</a><br/>');

This answer is explained wonderfully here :

https://stackoverflow.com/a/11246131/802651

edited May 23 '17 at 12:05

Community

1
1

answered Aug 23 '14 at 08:20

Adarsh Konchady

2,577
5
30
50

Barmar · Answer 3 · 2014-08-23T08:02:30.027

0

Put

e.preventDefault()

at the beginning of the click handler.

edited Aug 23 '14 at 08:02

answered Aug 23 '14 at 07:52

Barmar

741,623
53
500
612

you mean `e.preventDefault()` – Miguel Mota Aug 23 '14 at 07:58

Stop page scrolling to the top after the user clicks a read more link

3 Answers3