Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have copied javascript code of smooth scroll from stackoverflow and modified in my page but it is not working.
The Original Code is given here:
http://jsfiddle.net/swfour/dN4S4/1/
The Modified Code :
http://codepen.io/anon/pen/VYmLva
There are several issues:
JQuery was not linked in your codepen
Your ids in your a tags looked like this:
id="#sld1" //should be just sld1 no #
instead of this
id="sld1" // # isn't included in HTML, thats a CSS indicator
you were calling:
onmousedown="autoScroll('slide1');
In your a tags but autoSCroll was not defined in your JS
This line in your if statment:
$(this).get(0).id
Should just be $(this).attr("id")
overflow: hidden on your body, html was preventing the page from animate scrolling down. Remove that.
In fact you don't need those if statements at all. Since you're calling the id of the div in your href you can simply do:
target = $(this).attr("href");
Which would return: #slide1 or #slide2, etc. That will target your div of the same id
NEW CODEPEN
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
Coding it in VS code. If you need for info, please let me know.
Check via the browser debugging console if any other style is overwriting your css. In chrome, right click with your mouse and select "inspect element" from the popup menu. Find the body tag in the console that should have appeared and click on it. To the right you should see all the css of the element you selected. If you see your own code "striked" with a line it means it's being overwritten by the code above it that looks unstriked.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I'm currently working on this website http://www.test.yanosp.com/, but when I click the Back to Top button on the bottom of the page, the page gets white. How do I get rid of it? Thank you.
I inspected your pagetop__link class and found that in the "http://www.test.yanosp.com/wp-content/themes/lionmedia/style.css" file, where you define that class in the stylesheet, you have the following selector:
.pagetop__link:active::before {
background:rgba(255,255,255,0.9);
z-index:9999;
}
Get rid of the line background:rgba(255,255,255,0.9); and it should work.
remove .pagetop__link::before {position: fixed} solve the problem
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a project which renders multiple spinners and I've noticed that on reload only the last spinner is spinning. All the elements use :before.
I am aware that this is fixable by removing the :before in the css but I would like to know why this was the case.
Here's the example, you'll see all the spinners load then when you click on the "reload" text only the last spinner will spin.
Link to JSFiddle
The issue is you're setting before on .spinner class.
Set it on .spinner-container class and it will work as expected
Check this fiddle
Reach doesn't work in stack snippet. That's why I added a js fiddle
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
It should be easy, but I'm having trouble with this issue
I have a variable number of div's with text in them and each with overflow: scroll
I want to be able to detect which div the user is scrolling, and store that div's id into a JS variable, but my attempts are not working...
My code is here: http://jsfiddle.net/7pn85ae8/
Ah, it took me a minute, but I see in your JSFiddle, everything you wrote is fine -!
The problem simply appears to be that you are not including jQuery -
Have a look at the fiddle, and then, in your code, add this snippet somewhere before your code:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
You'll see the only thing that i changed was the alert - and that I added jQuery on the drop-down menu on the left...
Cheers -!
http://jsfiddle.net/7pn85ae8/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Basically I have a website where the title of the page you are one takes up the entire screen and then the content is below after you scroll. I was wondering if it would be possible to make it automatically scroll smoothly to the next div after maybe half a second on the "title screen". You can see what I am talking about by going on this page.
The class name for the content is contactus, but I made a specific class name for the scrolling called scroll-down. This is because I want to use it in a few different areas, same concept each area.
Looking at your code, this is something that works:
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('.portfolio-header').height()
}, 1000);
});
Note that we are using animate() to smoothly scroll (in a period of 1000 milisecs) and we are also getting the height of the previous block .portfolio-header in order to know the number of pixels to scroll.
And finally, we wrap all of that in a .ready() function to wait for the document to be ready before doing the scroll.