Scrolling down with button - javascript

Given the following button :
<section id="section04" class="demo">
<h1>Scroll Down Button #4</h1>
<a><span></span>Scroll</a>
</section>
How can I make the button scroll down on the page with a particular amount?

Using jQuery animate
$("#section04").click(function(){
$("html, body").stop().animate({
scrollTop: 100px
},1000);
});
Change 100px to any value required.

If you want to use vanilla javascript you can use windows built in methods scrollTo
//.html
<div style='height:4000px; border:solid red 2px; width:80%;'>
<input type='text' class='y' />
<button>Scroll Y-axis</button>
</div>
//.js
var button = document.querySelector('button')
button.addEventListener('click', function(){
var y = document.querySelector('.y').value
window.scrollTo(0,y)
})
jsfiddle

Related

HTML link to anchor without changing url

I have a button on the top of my page that links to /#tabs (index id="tabs"). it uses a script to scroll nicely down to the id but it changes the url to www.domain.com/#tabs how can I remvoe the #tabs part? I was thinking about doing it in .htaccess but not sure if thats possible and its proerbly a bad idea.
heres the html:
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
</header>
<br />
<div id="tabs" style="padding:20px;"></div>
<div class="tabs">
<h1>About</h1>
<div class="p">
about us
<input type="submit" value="Contact Us" class="btn" name="contact" style="min-width:15%;"/>
</div>
</div>
<a class="smoothscroll" href="/#tabs">
<div class="scroll-down"></div>
</a>
Is the button part and it uses this script to scroll smoothly
<script>
/*----------------------------------------------------*/
/* Quote Loop
------------------------------------------------------ */
function fade($ele) {
$ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
var $next = $(this).next('.quote');
fade($next.length > 0 ? $next : $(this).parent().children().first());
});
}
fade($('.quoteLoop > .quote').first());
/*----------------------------------------------------*/
/* Smooth Scrolling
------------------------------------------------------ */
jQuery(document).ready(function($) {
$('.smoothscroll').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
});
TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);
</script>
just forget about the top of the script, thats just a part for the index.
You can do it otherwise like this:
In html
<a href="" class="smoothscroll" onclick="functionforscroll('tabs')">
<div class="scroll-down"></div></a>
in js
var functionforscroll = function(id){
var reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
this way you can scroll to the required position without changing the url
All you need to do is put a tabindex="-1" to the element you want the focus to, and on the event of focusout/blur remove that tab index. This will enable the element not to be tabbed, but will bring the focus to the element.
I have done that using JQuery:
(ELEMENT_FOR_FOCUS).attr('tabindex', -1).on('blur focusout', function () {
$(this).removeAttr('tabindex');
}).focus();
Try use "data-target" instead "href". Works for me.
Changing Vicky Kumar's answer, this will work.
HTML:
<button class="smoothscroll" onclick="functionforscroll('id')">
<div class="scroll-down"></div></button>
Javascript
const functionforscroll = function(id){
const reqId = "#"+id;
window.scrollTo(0, $(reqId).offset().top-85);
}
You can style the button to be like the rest of your links in your project. One thing is to set outline to none, so that when someone clicks the button it will not show the border/outline of the button.

Scrolling div horizontally

How can I make this scroll left or right using navigation button?
<div class="slider-wrap">
<div class="slide-wrap">
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
<div class="slider-slide-wrap"></div>
</div>
</div>
<div id="slider-left" class="slider-nav"></div>
<div id="slider-right" class="slider-nav"></div>
JS
$("#slider-left").click(function(){
alert("< clicked.");
});
$("#slider-right").click(function(e){
alert("> clicked.");
$('.slide-wrap').scrollLeft(5000);
});
Fiddle
You are selecting the wrong <div>. Note the selector: $('.slider-wrap') (not .slide-wrap).
$("#slider-left").click(function () {
$('.slider-wrap').animate({
scrollLeft: 0
}, 200);
});
I have used .animate because you get visual feedback about what's happening (so I think using animate is better for UX). This would work equally well with .scrollLeft() though:
$("#slider-left").click(function () {
$('.slider-wrap').scrollLeft(0);
});
See it working in a fiddle

JQuery: show div below pushed button

How can I show the div-element below the pushed button?
html:
<button id="one" class="btn">One</button>
<button id="two" class="btn">Two</button>
<button id="three" class="btn">Three</button>
<div id="popup">Message!</div>
JS:
$('.btn').click(function(e) {
const targetBtn = e.target;
$("#popup").show("slow").delay(3000).hide("slow"); //HOW TO SHOW IT BELOW TARGET BUTTON
})
Because your div has an id not class so you have to use # notation for ids:
$('.btn').click(function (e) {
$("#popup").css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).show("slow").delay(3000).hide("slow");
});
Demo
Not sure if your button is allready visible or not before you want to replace it. But this puts the div after the clicked button:
$("button").click(function(){
$("#popup").insertAfter($(this));
});
http://jsfiddle.net/6FLLt/
If you want to show() it use
$("button").click(function(){
$("#popup").show().insertAfter($(this));
});
http://jsfiddle.net/6FLLt/2/
UPDATE
If you want to place the message below the buttons visually you have to change to html and CSS like so:
HTML
<div class="relative">
<button id="one" class="btn">One</button>
</div>
<div class="relative">
<button id="two" class="btn">Two</button>
</div>
<div class="relative">
<button id="three" class="btn">Three</button>
</div>
<div id="popup">Message!</div>
CSS
#popup{position:absolute; bottom:-20px; display:none;}
.relative{position:relative; float:left;}
http://jsfiddle.net/6FLLt/5/
try something like this
$('.btn').click(function(e) {
$(this).after($('#popup'));
})
Note : User # for id and .(dot) for class
How can I show the div-element below the pushed button?
Set the margin of the div accordingly (to show the div directly below the pushed button):
$('.btn').click(function(e) {
var $elem = $(e.target),
$div = $('#popup');
$div.css('margin-left', $elem.offset().left + 'px');
$("#popup").stop().show("slow").delay(500).hide("slow");
})
Demo: http://jsfiddle.net/abhitalks/5ef5L/
Note: You should .stop() before attempting the animation, because when you click another button, the earlier animation might still be underway, hence giving unexpected results.
Aside: You need to use the $('#...') selector, because popup is an id.

jQuery Show/Hide - Make other elements have a smoother transition

Is there a way for the label/form below the 'myContent' div to have a smoother transition when I am hiding/showing it?
Currently, when the myContent div is toggled, the other elements below it 'jump' into place - it would be great if I could figure out a way to slide them up into their correct location. What do you think?
JavaScript
function toggleDiv(divId) {
jQuery("#" + divId).toggle("slide", {
direction: "up"
});
}
function ShowThing(divID) {
jQuery("#" + divID).show("slide", {
direction: "up"
}, 500);
}
function HideThing(divID) {
jQuery("#" + divID).hide("slide", {
direction: "up"
}, 500);
}
HTML
Toggle Button
<button onclick="ShowThing('myContent');">Show</button>
<button onclick="HideThing('myContent');">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
Click Here for jsFiddle
Optimized the javascript so that all code is based on jQuery.
HTML code
Toggle Button
<button id="showthing">Show</button>
<button id="hidething">Hide</button>
<div>
<div id="myContent" style="background-color: #aaa; padding: 5px 10px;">The content in this div will hide and show (toggle) when the toggle is pressed.
</div>
</div>
<div>
<label for="cool-field">Name</label>
<input type="text" name="cool-field" id="cool-field" />
</div>
jQuery Code:
$(function(){
$('a.togglebtn').click(function(){
$('#myContent').stop().slideToggle(500);
return false;
});
$('#showthing').click(function(){
$('#myContent').slideDown(500);
});
$('#hidething').click(function(){
$('#myContent').stop().slideUp(500);
});
});
Your Jsfiddle is blank.
Instead of show() you can use slideDown('slow');
for hide you can use slideUp('slow'); Also you can set direction.
Otherwise you can use JQuery Animate

JavaScript event on scroll up or scroll down

Is it possible to write a JavaScript to make an action when a DIV Layer's scroll bar is manually scrolled up or scrolled down?
If so please give me a hint to implement a simple such as alert box saying you scrolled up and you scrolled down.
You can simple use onscroll event of java-script.
OnScroll Event Reference : http://www.w3schools.com/jquery/event_scroll.asp
Here is example,
<head>
<script type="text/javascript">
function OnScrollDiv (div) {
var info = document.getElementById ("info");
info.innerHTML = "Horizontal: " + div.scrollLeft
+ "px<br/>Vertical: " + div.scrollTop + "px";
}
</script>
</head>
<body>
<div style="width:200px;height:200px; overflow:auto;" onscroll="OnScrollDiv (this)">
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
<div style="height:300px; width:2000px; background-color:#a08080;"></div>
Please scroll this field!
</div>
<br /><br />
Current scroll amounts:
<div id="info"></div>
</body>
Working copy here : http://jsbin.com/iledat/2/edit
Try jquery scroll event.
$('div').scroll(function(){alert('scrolled!')})

Categories