ASP .NET MVC 5 Write javascript in View.cshtml file

I’m new to ASP .NET and I am struggling with javascript in MVC.
I have a IndexView.cshtml file inside View folder and would like to write a short javascript section inside to move site back to top with a button.
It works perfectly in normal html so there is that.
Normally a button shows up whenever I scroll down from top of a site and disappears when I go back up to the very top. Here it does not show up at all.
What could I do to make it work?
Thanks in advance!

So this is at the end of my body in IndexView.cshtml right before </body> tag.

<script type="text/javascript">
        $(document).ready(function() {
            $().UItoTop({ easingType: 'easeOutQuart' });

        });
    </script>
    <a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="toTop"><span id="toTopHover"> </span></a>

And this it the part of move-top.js inside Scripts folder /Scripts/move-top.js

(function ($) {
    $.fn.UItoTop = function (options) {
        var defaults = {
            text: 'To Top', min: 200, inDelay: 600, outDelay: 400, containerID: 'toTop', containerHoverID: 'toTopHover',
            scrollSpeed: 1200, easingType: 'linear'
        }, settings = $.extend(defaults, options), containerIDhash = '#' + settings.containerID, containerHoverIDHash = '#' + settings.containerHoverID;
        $('body').append('<a href="#" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" id="' + settings.containerID + '">' + settings.text + '</a>');
        $(containerIDhash).hide().on('click.UItoTop', function ()
        {
            $('html, body').animate({ scrollTop: 0 }, settings.scrollSpeed, settings.easingType);
            $('#' + settings.containerHoverID, this).stop().animate({ 'opacity': 0 }, settings.inDelay, settings.easingType); return false;
        }).prepend('<span id="' + settings.containerHoverID + '"></span>').hover(function ()
        { $(containerHoverIDHash, this).stop().animate({ 'opacity': 1 }, 600, 'linear'); }, function ()
        { $(containerHoverIDHash, this).stop().animate({ 'opacity': 0 }, 700, 'linear'); });
        $(window).scroll(function () {
            var sd = $(window).scrollTop();
            if (typeof document.body.style.maxHeight === "undefined")
            {
                $(containerIDhash).css({
                    'position': 'absolute', 'top': sd + $(window).height() - 50
                });
            }
if(sd>settings.min)
$(containerIDhash).fadeIn(settings.inDelay);else
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery);

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Looks like your js code is dependent on the jQuery library. That means you need to load jQuery code before execcuting this code.

In the Layout file, @RenderSection("scripts", required: false) is called at the very bottom after loading jQuery library.

<div id="pageContent">
    @RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

And in your view, you should be including any script which is dependent of jQuery inside the Scripts section so that when the page is fully rendered, it will be added to the bottom ( After other libraries like jQuery is loaded);

<h2>This is my View</h2>
@section Scripts
{
    <script>
      $(function(){
         alert("All good");
      });
    </script>
}

Method 2

@TheGalax did you remember to reference your javascript file?

— Added jQuery —

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/Scripts/move-top.js"></script>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0