0

Not sure if this is a bit of a tall order, but what I'm looking to achieve is to be able to scroll to the top of a specific page and toggle the div to show a hidden search form.

Below is what I have at the top of the page

<p>
    <center>
        <a href="javascript:toggle('filterresults')">
            <div class="mobile-button">&#9776; Filter Results</div>
        </a>
    </center>
</p>
<div id="filterresults" style="display:none">SEARCH FORM HERE</div>

What I would like is as a user scrolls down the page a button fixed to the bottom appears allowing them to scroll back to the top and open the toggled div which is set to hide.

Is this possible? If so, any ideas how to implement it. Thank's for any advise offered.

UPDATE Ok, this is what I've figured out so far which does what I want, this only thing I could do with is having the button fade in as the user scrolls down so far of the page 

<script type="text/javascript">//<![CDATA[ 
var x = document.getElementById('filterresults');
function myFunction() {
    if (x.style.display === 'block') {
        x.style.display = 'none';
    } else {
        x.style.display = 'block';
    }
    $("html, body").animate({ scrollTop: 0 }, "slow");
}
</script>
<button onclick="myFunction()">Toggle Results</button>
Jase
  • 77
  • 11
  • Can you explain it in a clear way – Techy Sep 25 '18 at 05:38
  • 1
    I think you can check https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation – Shahaji Deshmukh Sep 25 '18 at 05:41
  • Basically I've lots of different pages, each with their own specific search form located at the top of their respective pages, all are set to hidden. So what I'd like is to have a button or link that allows the user back to the top of the page, but also opens the hidden div. Not sure if that's any clearer?? – Jase Sep 25 '18 at 05:47
  • Can you add HTML and JS. – Shahaji Deshmukh Sep 25 '18 at 05:47

0 Answers0