CODEWITHSUNDEEP
javascriptphpscrollonclick
C4d
C4d

Reputation: 3282

JS Scroll Event not firing up

I've tried overwriting the scroll-to-id-event with a js-function I found online (Smoothly scroll to an element).

For unknown reasons it wont fire up. Js itself is correctly implemented, as I managed to output some text with document.print('test');

Im really really not into Js, so please be patient with me.

Index.php:

<html>
    <head>
        <title>MyWebsite</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <!-- JS WORKS THIS WAY -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

        <!-- FIRST TRY HERE -->
        <script src="jquery/onScroll.js"></script>

        <link rel="stylesheet" href="css/layout.css" />
    </head>

    <body>  
        <!-- SECOND TRY HERE / also with <script type="text/javascript">-->
        <script>
        $('a[href^="#"]').on('click', function(event) {
            var target = $(this.href);
                if( target.length ) {
                    event.preventDefault();
                    $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
            }
        });
        </script>

        <div id="header">
            <div id="header" class="image light">
                Description overlayed on image.
                <footer class="dark">
                    My footer
                </footer>
            </div>
            <div id="header" class="description">
                Another Content
            </div>
        </div>
        <div id="register">
            Some Content.
        </div>
    </body>
</html>

onScroll.js

$('a[href^="#"]').on('click', function(event) 
{
    var target = $(this.href);
        if( target.length ) {
            event.preventDefault();
            $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

Result:
Nothing happens. Its jumping in the default way. Tested Chrome and Firefox.

I hope I wont get kicked off for this rather simple thing. ^^
Appreciate your help. Thanks a lot.

EDIT -> FIDDLE

Upvotes: 1

Views: 172

Answers (3)

Henrique Schreiner
Henrique Schreiner

Reputation: 185

I made some changes on your code and worked. On your link to scroll to another div, i used:

<a href="javascript:;" data-scroll-to="#Second" class="button">Scroll to Second!</a>

And on javascript code:

$('[data-scroll-to]').on('click', function(event) {
        var target = $(this).data('scroll-to');    
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                scrollTop: $(target).offset().top
            }, 1000);
        }
    });

Now, anytime you want to scroll something, just use data-scroll-to="#something" in your code an put javascript:; on href attribute just to prevent any onclick event on link.

Upvotes: 0

Andy
Andy

Reputation: 5091

The problem is with your target variable. this refers to the DOM element so as mentioned in another answer, this.href returns the full href of the element. A better solution would be to use jQuery's .attr method to return the exact contents of the href attribute. E.g:

$('a[href^="#"]').on('click', function(event) {
        var target = $($(this).attr('href'));
            if( target.length ) {
                event.preventDefault();
                $('html, body').animate({
                scrollTop: target.offset().top
            }, 1000);
        }
});

This way, you're setting target to a jQuery collection containing elements (one in this case) that match the selector inside the href e.g #Second

Here's a working fork of your fiddle

Upvotes: 2

mpallansch
mpallansch

Reputation: 1194

Your problem is this line

var target = $(this.href);

Even though you set your href to be #Second in html, the browser sets the href to be the full path (ex: http://www.yoursite.com#Second). To just get your hash selector you could use something like this.

var target = $('#' + this.href.split('#')[1]);

Upvotes: 1

Related Questions