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); }
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:
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:
<!-- 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 -->
<!-- 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>
Page scroll down
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"
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
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:
To
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:
So in the navgation code if you see the markup in your page your markup shold look like this:
Hope this helps, and make sense. If you have further questions keep asking them.
/Dennis
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?
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:
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:
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"
Hope this helps, and make sense.
/Dennis
Hi Dennis
Thank you so much ;-) yes it make sense
is working on a reply...