CODEWITHSUNDEEP
javascriptjqueryangularjsmaterializescrollspy
theCodingLaw
theCodingLaw

Reputation: 29

Scrollspy for Materialize not scrolling at all with Angularjs

I am trying to use scrollspy from Materialize (http://materializecss.com/scrollspy.html) to target each div that is created with ng-repeat.

However, it seems to me as if the scrollspy class is not doing anything. Instead of scrolling to that part of the page, the DOM just reloads and points to the portion of the page.

Another problem is that using href="/#community#sharingLove" is changing the website URL. Is there anyway for the scrollspy to work without adding to the URL?

<div class="full-height row" ng-controller="CommunityController">
    <div class="col l10 main-content">
        <div ng-repeat="principle in acmPrinciples" id ="{{principle.id}}" class="row full-width centering-text section scrollspy">
            <div class ="col-md-12">
                <h4>{{principle.title}}<h4>
            </div>
            <div class ="col-md-12 comm-description-container">
                <p class="paragraph-style larger-font-size">
                    {{principle.description}}
                 </p>
            </div>
            <div class ="col-md-12">
                <video class="responsive-video comm-video-height" controls>
                    <source ng-src="{{principle.videoURL}}" type="video/mp4">
                </video>
            </div>
        </div>
    </div>

    <div class="col l2 scroll-content">
        <div class="row">
            <div class="col hide-on-small-only m3 l2 scroll-items">
                <ul class="section table-of-contents">
                     <li><a href="#/community#experiencingGod">Experiencing God</a></li>
                     <li><a href="#/community#sharingLove">Sharing Love</a></li>
                     <li><a href="#/community#conntectingLives">Connecting Lives</a></li>
                     <li><a href="#/community#declaringTruth">Declaring Truth</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

I have linked included jQuery, bootstrap, and materialize. Last thing: other features of materialize work for me, just not the scrollspy. I also do 

$(document).ready(function(){
    $('.scrollspy').scrollSpy();
});

Upvotes: 0

Views: 1332

Answers (1)

Jacob Mouka
Jacob Mouka

Reputation: 2095

I think if you remove #/community from the hrefs it should work. The href should contain the id of the block, not extra url info. Eg try using

<a href="#experiencingGod">Experiencing God</a>

Upvotes: 2

Related Questions