CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Trend Snaps
Trend Snaps

Reputation: 198

Readmore button taking user to top of the page

I am facing problem here . when user clicks read more button then more content is appearing but its taking user to top of the page , to see a more content the user has to come down the page again .

Can we avoid this ?

Here is my code 

<!--lot of other content in the page -->
<h1>Example text</h1>
<p >example content.</p><a href="#" onclick="show('example1')"> Read more </a>
<p id="example1" style="display:none; font-weight: bold">more text will appear here.</p>

<script>
 function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
</script>

any help

Upvotes: 1

Views: 102

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

You're using the href='#' inside your link, disable the default behavior of it (which would be jump to the location where # exists, the top in this case.

Either apply return false; or e.preventDefault()

<a href="#" onclick="show('example1'); return false;">

And a working stack snippet with a large h1 to illustrate the solution:

function show(ele){
     document.getElementById(ele).style.display = 'block';   
}
h1 {
  height: 500px;
  background-color: #F00;
}
<h1>Example text</h1>
<p >example content.</p><a href="#" onclick="show('example1'); return false;"> Read more </a>
<p id="example1" style="display:none; font-weight: bold">more text will appear here.</p>

Upvotes: 3

Related Questions