locked
Looking for scroll to top button simple implement RRS feed

All replies

  • User2053451246 posted

    Both of these work:

    <a href="#top">Back to top</a>
    <button type="button" onclick="window.location.hash = '#top';">Back to top</button>

    Friday, August 16, 2019 6:54 PM
  • User709978785 posted

    That's great, but I hoping for something that works like the one from w3 that shows when they scroll and hides when they get to the top.

    Thank you,

    Friday, August 16, 2019 7:43 PM
  • User709978785 posted

    I tried your suggestion and it works, but only works once then you have to reload the page to get it to work again. Any idea how to fix that?

    Thank you.

    Friday, August 16, 2019 8:38 PM
  • User-719153870 posted

    Hi Jackxxx,

    It seems that in a touch device, there's no click event but with touch event like .tap.

    Please refer to here to test in a touch device with only a few change in the w3c code.

    <script>
                // When the user scrolls down 20px from the top of the document, show the button
                window.onscroll = function () { scrollFunction() };
    
                function scrollFunction() {
                    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                        document.getElementById("myBtn").style.display = "block";
                    } else {
                        document.getElementById("myBtn").style.display = "none";
                    }
                }
    
                // When the user clicks on the button, scroll to the top of the document
                function topFunction() {
                    document.body.scrollTop = 0;
                    document.documentElement.scrollTop = 0;
                }
    
                $('myBtn').bind('click', topFunction() ).bind('tap', topFunction() );
            </script>

    Best Regard,

    Yang Shen

    Monday, August 19, 2019 1:39 AM
  • User709978785 posted

    Yang,

    I tried your suggestion and I still get the error on the iPad.

    Thank you,

    Monday, August 19, 2019 2:33 PM
  • User-719153870 posted

    Hi Jackxxx,

    still get the error on the iPad

    What error have you got, is there any error message you can share?

    Best Regard,

    Yang Shen

    Tuesday, August 20, 2019 1:23 AM
  • User-1038772411 posted

    Hi Jackxxx,

    Try this may help you : 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://i1155.photobucket.com/albums/p559/scrolltotop/arrow200.png" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol">'+o.controlHTML+"</div>").css({.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Scroll to Top"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();
    jQuery(document).ready(function($){ 
    if (localStorage.getItem('advertOnce') !== 'true') {
    $('body').append('<div id="advert-once" style="; bottom: 10px; left: 10px;"><a href="https://www.scrolltotop.com/guide-on-how-to-make-a-website.php" target="_blank" rel="nofollow"><img src="https://i1155.photobucket.com/albums/p559/scrolltotop/makewebsite.png" width="87" height="52" border="0" alt="make a website" /></a><div class="advert-button"></div></div>')
    localStorage.setItem('advertOnce','true');
    } 
    $('#advert-once .advert-button').on('click',function(){
    $('#advert-once').hide();
    }); 
    });
    </script>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    also refer: https://www.scrolltotop.com/

    Tuesday, August 20, 2019 5:02 AM
  • User-1627021052 posted

    <button onclick="window.scrollTo(0, 0);">scroll to top</button>
    Tuesday, August 20, 2019 7:26 AM
  • User709978785 posted

    Yang,

    Here is the error: I have already added a unique machinekey to the site. I still get this error on the iPad.

    Server Error in '/' Application.
    Configuration Error
    Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

    Parser Error Message: Decryption key specified has invalid hex characters.

    Source Error:


    An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.

    Source File: E:\web\eo\web.config Line: 62

    Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.36480

    Tuesday, August 20, 2019 1:05 PM
  • User-719153870 posted

    Hi Jackxxx,

    Jackxxx

    I have already added a unique machinekey to the site.

    It seems not your code but your machinekey setting cause the error which you can find in your web.config:

    Jackxxx

    Source File: E:\web\eo\web.config Line: 62

    Please share your <machinekey> to check if there's any special setting.

    Also, you can find a related thread in our forum:https://forums.asp.net/t/2099473.aspx?Decryption+key+error.

    In above thread, removed the ,IsolateApps on the key solved his problem which you can also try.

    For more information about machinekey, please refer to here.

    Best Regard,

    Yang Shen

    Wednesday, August 21, 2019 5:25 AM