I'm pretty new to JQuery and JavaScript, as I've only done some self-learning recently, so the solution might be simpler than I think. However, I've done quite a lot of research about it already, but I still haven't found a solution.
I'm currently working on a Web App in C# (if that information is relevant), with a fixed scrollbar at the side of the page. The bottom of the scrollbar has a collapsible list, and functions properly when I try to toggle it.
I was wondering how to auto scroll to the bottom when I expand the list. Because it's on the bottom, when I try to expand it, I have to scroll again to the bottom to see the new options (click here to see GIF). I was hoping to implement this for better UX. Moreover, moving the drop down elsewhere is not an option for me.
Here's my HTML code for the collapsible list, which is inside a nav with id "sidebar":
VPN Installation
<ul class="collapse list-unstyled" id="pageSubmenu">
<li><a class="nav-link nav-vpn" href="../Mac.aspx">Mac OS</a></li>
<li><a class="nav-link nav-vpn" href="../Windows.aspx">Windows</a></li>
</ul>
I've tried these codes already:
$("#vpnistallation").click(function () {
jQuery('#sidebar').animate({ scrollTop: 0 }, 1500); // scroll to bottom
});
$("#vpninstallation").click(function () {
var window_height = $(window).height();
var sidebar_height = $('#sidebar').height();
$('#sidebar').animate({ scrollTop: window_height + sidebar_height }, 'slow', function () {
});
$("#vpninstallation").click(function () {
$("#sidebar").animate({ scrollTop: $(document).height() }, "slow");
});
I've been at it for quite some time already, and I just want to get this over with because it's the last thing I haven't figured out. Any help would be highly appreciated. Thanks!
Related
Forgive me if this has been asked, but I've been searching all day on here and have not seen any question relating to my specific problem.
I'm building a one page parallax-style website with a navigation bar utilizing a fixed position to allow users to quickly jump to different sections of the page.
Currently I'm trying to implement the scrollTo jQuery plugin (flesler/jquery.scrollTo - Github) to give a nice smooth animated scroll.
This is the 5th or 6th different jQuery method I've implemented to make this effect work with no success. The scrollTo method seems to be the closest to working, but it still won't work.
It does not work at all on Chrome 42.0.2311.90
It does not work at all on Firefox 37.0.2
It does work on Safari 5.1.10, but I haven't been able to check on the newest version of Safari. Also the site doesn't render right on Safari 5.1.10 yet. I also have not had access to a computer with IE.
The test site is located at http://revolt-designs.com/parallax/
Here is how I'm calling the script:
$(document).ready(function(){
$('#nav-links li a').click(function() {
$.scrollTo($(this).attr('href'), {duration: 3000});
});
});
And the links are formatted this way:
<div id="nav">
<ul id="nav-links">
<li>About</li>
<li>News</li>
<li>Events</li>
<li>Contact</li>
</ul>
</div>
For the sake of simplicity, the anchors are pointing to divs located on the page, ie:
<!-- GROUP 2 -->
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
Lorem Ipsum
</div>
</div><!-- end GROUP 2 -->
Hopefully someone will catch something small and easy that I'm missing. Thanks. To be clear, I'm not asking for an alternative to the script I'm using. I'm asking for help finding the underlying issue that's preventing any smooth scrolling scripts from working on my site.
Change your code to scroll on the .parallax element:
$(document).ready(function() {
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
Here is a fiddle (Used the HTML from your webpage)
For the sake of browser compatibility, you could consider changing height: 100vh; in your css to perhaps use .height() instead:
$(document).ready(function() {
height = $(window).height();
$('.parallax').css('height',height);
$('#nav-links li a').click(function() {
$('.parallax').scrollTo($(this).attr('href'), {duration: 3000});
});
});
This snippet required jquery and jquery UI, you can remove the easing part at the end if you do not want to include jquery UI
$(document).ready(function(){
$('#nav ul li a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr('href');
//changing the value of offsetValue will help account for fixed headers or whatever.
//EDIT: used data-offset to allow for multiple offsets defualt is 0.
offsetValue = $(this).data('offset') | 0;
$('html, body').animate({
scrollTop: $(target).offset().top-offsetValue
},
{
duration: 2000,
easing: "easeOutQuint"
});
//number at the end here changes the speed, slower = higher
});
});
I am new in the world of web development so excuse my ignorance in some points :p
Anyone can tell how jump links work? And how to implement them?
Let me make a specific example, I want to create a website with an horizontal bar, I saw some modern sites that those links doesn't change the page, they just jump down to another section and if I scroll up, I end up on home again.
How can I implement this and does it work with bootstap?
Thanks
That, my friend, is a single page website, they are not jump links, you are only using jquery to scroll down to the content on click.
Here is an example of a code that will do just that :
$(function() {
$("#abc").bind("click", function() {
$("html, body").animate({
scrollTop: $("#anchor").offset().top
}, 500);
});
})(jQuery);
When you click on an element with an id of abc it will take you to the top of the #anchor id element, no matter where on the page it is found.
Also, here is an example using this exact code : jsfiddle
Go to title1
Go to title2
/* Lots of space */
<a name="title1">Title 1</a>
/* Lots of space */
<a name="title2">Title 2</a>
I am using https://github.com/Prinzhorn/skrollr to animate the background of my site as I scroll. However I am also wanting to have my links scroll up and down the page like a normal single page site would do.
The problem is that both are working if I manually scroll the background changes, if I click the link the page scrolls to the correct place. The problem is that when I click the button the background doesn't scroll as well.
It seems like I am working with two different scroll functions and as a result they aren't working together and I need to use the same one.
Here is the code.
js - Scroll to link:
var $root = $('html, body');
$('a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
js – Skrollr init
skrollr.init({
smoothScrolling: true,
forceHeight: true
});
I will try put together a fiddle to make it more clear but hopefully the answer is really simple.
If anyone else ever faces this problem the answer lies her: https://github.com/Prinzhorn/skrollr-menu
This will allow you to scroll to you internal links along with Skrollr animations. A HUGE plus and a very simple fix, you don't even need any of your own scrolling code just this and it will work with you links.
There's a way to do this, Skrollr has some methods very useful, in console, just type the variable contains skrollr, it will show some methods that you can use, one of them is "setScrollTop(int, bool)", so just call this method with the info you need, for example:
s.setScrollTop(9000, true)
Which means that I want it to scroll to the height position 9000. It works fine, you just need to know the height position where you need to go.
i have a long scrolling page with lots of divs, one below the other. i would like to scroll automatically when you visit (or reload) the site to scroll from top to a specific div near of the bottom. to jump there isnt a problem, but i want the "scroll" effect. ive checked out scrollTo() but i dont get it to work.
my first attempt was something like
$(document).ready(function () {
$.scrollTo('#div5'); });
but it doesnt fire anything. a little bit help needed :)
thanks
Try this:
$('html, body').animate({
scrollTop: $('#div5').offset().top
}, 500);
http://jsfiddle.net/nTwLm/2/
Basically I have an unordered list acting as my navigation on a one page website sorted by sections. These sections or panels are full width and height of the browser window.
In the first panel, this list is vertical but when the user scrolls down the page to section two (i.e. the second panel from the top of the browser window) I'd like to change the style of it so that it fixes to the top of the browser window and becomes a horizontal nav instead of a vertical one. I don't want to duplicate the list if possible.
I'm not great at jQuery and don't really know where to start. Any help would be great.
This is my current code that gets the width and height of the browser window and displays a full screen div:
function fitElements(){
var height=$(window).height();
var width=$(window).width();
$('.panel').css('height',height);
$('.panel').css('width',width)
};
Here's a very simple example:
DEMO
html:
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div id="divOne" class="panel">
</div>
<div id="divTwo" class="panel">
</div>
<div id="divThree" class="panel">
</div>
css:
#nav {
position:fixed;
top:0;
left:10px;
}
#nav.horizontal li {
float:left;
}
#divOne {
background-color:#cef;
}
#divTwo{
background-color:#efc;
}
#divThree{
background-color:#fce;
}
js/jQuery:
$("div.panel").css({
height: $(window).height(),
width: $(window).width()
});
$(window).scroll(function() {
($("#divTwo").offset().top <= window.pageYOffset) ? $("#nav").addClass("horizontal") : $("#nav").removeClass("horizontal");
});
$("#linkOne").click(function(e){
$('html, body').animate({
scrollTop: $("#divOne").offset().top
});
$("#nav").removeClass("horizontal");
e.preventDefault();
});
$("#linkTwo").click(function(e){
$('html, body').animate({
scrollTop: $("#divTwo").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
$("#linkThree").click(function(e){
$('html, body').animate({
scrollTop: $("#divThree").offset().top
});
$("#nav").addClass("horizontal");
e.preventDefault();
});
Okay, providing I understood you correctly (see my comment looking for clarification), your goal is to make sure that your navigation pane is visible to your site visitors even when they scroll down the page. I would caution you against changing the nav bar to show horizontally after reaching a certain point on the page only because it will look pretty choppy, especially in slower browsers, unless (and sometimes even if) you provide a lot more code (complex for a novice) to smooth out the transition.
What I suggest is that you take a look at this question from a few days ago. I created a demo for the effect that he was looking for, which is very similar to what you are looking for, and hosted it on my development site. Take a look and if it's something that you like and if it is and you have trouble implementing it let me know and I'll be more than happy to help you.