page scroll down

C Andreasson 79 posts 207 karma points

Oct 05, 2014 @ 10:11

Razor

Hi

I do not really understand how I change the code in my partial view

so that navigation works with page scroll? (bootstrap).

Hier the orignal Html:

The Partial view macro "navigation"

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Oct 05, 2014 @ 12:00

Hi C Andreasson,

The only thing I see you are missing in your Razor script is that you don´t have the id of the section that you need to scroll down too. If you have all the css and javascript files in place.

It can be done by this: In my case I have used a parital razor macro

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@*
    Macro to display child pages below the root page of a standard website.
    Also highlights the current active page/section in the navigation with
    the css class "current".
*@

@{
    @* Get the root of the website *@
    var root = CurrentPage.AncestorOrSelf(1);
}

<ul class="nav nav-bar">
    <li class="hidden">
        <a href="#page-top"></a>
    </li>
    <li><a href="@root.Url">@root.Name</a></li>
    @foreach (var page in root.Children.Where("Visible"))
    {
        <li class="@(page.IsAncestorOrSelf(CurrentPage) ? "current" : null)">
            <a href="#@page.Name" class="page-scroll">@page.Name</a>
        </li>
    }
</ul>

And for the id I have choosen in this example the name of the page but if you use the id of the page as the selector, you can change it, just change this:

<a href="#@page.Name" class="page-scroll">@page.Name</a>

To

<a href="#@page.Id" class="page-scroll">@page.Name</a>

The next thing you need to do is to set the id or name in that content, that should be scroll down to if you are clicking on the link. Here is on how it´s done, with the boostrap example.

The id need to match the id in the link, so if you chosee to use page id´s in Umbraco, and the page, has an id of e.g 1068, then you section with the content for that page should look like this:

 <!-- About Section -->
    <section id="1068" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

So in the navgation code if you see the markup in your page your markup shold look like this:

<a href="#1068" class="page-scroll">@page.Name</a>

Hope this helps, and make sense. If you have further questions keep asking them.

/Dennis

Copy Link

C Andreasson 79 posts 207 karma points

Oct 05, 2014 @ 15:27

Hi Dennis

Thanks for your reply;-) I'm almost there but not quite. I can see it in the URL

I have another button on the page that scrolls, so my js and css works ok fine.

However, menu buttons do not ?? I have written as you can see below.

What do you think?

Copy Link

Dennis Aaen 4499 posts 18254 karma points admin hq c-trib

Oct 05, 2014 @ 16:08

Hi C Andreasson,

From the screenshot that you have showing in your post the link goes to an section with the name about. So I assume that you page is named about.

Did you have a section, div, or something else where the content for that page is in. Does it have the id="about"

If you see the bootstrap HTML is look like this:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Scrolling Nav - Start Bootstrap Template</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/scrolling-nav.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Intro Section -->
    <section id="intro" class="intro-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Scrolling Nav</h1>
                    <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p>
                    <a class="btn btn-default page-scroll" href="#about">Click Me to Scroll Down!</a>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- jQuery Version 1.11.0 -->
    <script src="js/jquery-1.11.0.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>

</body>

</html>

When I am clicking on the about link it scrolls down to the section with the id of about.

The content that will show in this case would be:

    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

So the href attribute on the link needs to match the id of the section or div or whatever HTML tags you are using. In this example "about"

<a class="page-scroll" href="#about">About</a>

 <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

Hope this helps, and make sense.

/Dennis

Copy Link

C Andreasson 79 posts 207 karma points

Oct 05, 2014 @ 22:59

Hi Dennis

Thank you so much ;-) yes it make sense

Copy Link

is working on a reply...

Flag this post as spam?

Page scroll down